highcharts 图表上添加图片

2018-05-31  本文已影响0人  牛奶大泡芙

今天讨论一个场景,比如天气预报里面在气温曲线的点侧边都有一个表示天气的icon图标,实现方法是怎样的呢?
https://www.hcharts.cn/demo/highcharts/combo-meteogram
这个api里面说的还是很清楚的

image API.png
但是添加图片的过程中遇到了两个问题
1)如何把url参数变成本地图标的url
2)如何找到每一个点的位置,在每一个坐标点旁边显示图片
理想效果如下:
天气预报.png
解决方法:
1)使用require(相对路径)
2)chart.series[0].data[i].plotX 代表坐标点相对于坐标原点的X方向位移
chart.plotBox.x 代表坐标原点相对于highchart窗口的X方向位移
chart.series[0].data[i].plotY
chart.plotBox.y
具体代码:
HighCharts.chart(dom, {}, function(chart){
            for(let i = 0;i<arr.length; i++){
                chart.renderer.image(require('../picturename.gif') ,chart.series[0].data[i].plotX+chart.plotBox.x-12 ,chart.series[0].data[i].plotY+chart.plotBox.y-30, 20,19,24).add();      
            }
        }
上一篇下一篇

猜你喜欢

热点阅读