highcharts 图表上添加图片

今天讨论一个场景,比如天气预报里面在气温曲线的点侧边都有一个表示天气的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();      
            }
        }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容