美文网首页
highcharts 图表上添加图片

highcharts 图表上添加图片

作者: 牛奶大泡芙 | 来源:发表于2018-05-31 18:23 被阅读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();      
                }
            }
    

    相关文章

      网友评论

          本文标题:highcharts 图表上添加图片

          本文链接:https://www.haomeiwen.com/subject/jxccsftx.html