Highcharts：添加一个自定义图像按钮 [英] Highcharts: Add a custom image button

问题描述

我想在高图上添加和图像按钮。
到目前为止，我已经成功创建了一个图像按钮，并在其上附加了一个点击事件。
但问题是，图像（sun.png）位于图表的左侧，图像按钮右对齐（工具栏的默认位置）。对此的任何修正？

 出口：{
按钮：{
 popUpBtn：{
符号：'url（images / sun.png）'，
 _titleKey：'popUpBtnTitle'，
x：-10，
 symbolFill：'＃B5C9DF'，
 hoverSymbolFill：'＃ 779ABF'，
 onclick：function（）{
 alert（'ad'）; 
 popUpChart（$（this））; 
} 
}，
 exportButton：{
启用：false 
}，
 printButton：{
启用：false 
} 
 
 
 $ b $ / code $ / pre 
 
 
另外，如果还有其他方法在图表中添加一个具有点击事件的图像，这些方法也受到欢迎。
解决方案
最后，我明白了这一点。 
可能会帮助其他人。
 函数回调（$ this）{
 var img = $ this.renderer.image（ '图像/ zoom_icon.png'，$ this.chartWidth-40,5,40,12）; 
 img.add（）; 
 img.css（{'cursor'：'pointer'}）; 
 img.attr（{'title'：'弹出图表'}）; 
 img.on（'click'，function（）{
 //点击图片后的处理
}）; 
 
} 
 
 new Highcharts.Chart（charts.params，callback）; 
 
 //其中charts.params是包含图表选项的对象
  
 
I want to add and image button on highcharts.
So far, I have successfully created a image button and have attached a click event on it.
But problem is that, the image (sun.png) is on left side of chart and image button is right aligned ( the default position of toolbar). Any fix for this ?
exporting: {
    buttons: {
        popUpBtn: {
            symbol: 'url(images/sun.png)',
            _titleKey: 'popUpBtnTitle',
            x: -10,
            symbolFill: '#B5C9DF',
            hoverSymbolFill: '#779ABF',
            onclick: function () {
                alert('ad');
                popUpChart($(this));
            }
        },
        exportButton: {
            enabled: false
        },
        printButton: {
            enabled: false
        }

    }
}
Also, if there are other methods to add an image in chart which have click event, those methods are welcomed too.
解决方案
Finally, I figured it out like this. 
May be it will help others.
function callback($this){
    var img = $this.renderer.image('images/zoom_icon.png',$this.chartWidth-40,5,40,12); 
    img.add(); 
    img.css({'cursor':'pointer'});
    img.attr({'title':'Pop out chart'});
    img.on('click',function(){
              // prcessing after image is clicked
    });

 }

new Highcharts.Chart(charts.params,callback);

// where charts.params is object which contains options for chart


                        
这篇关于Highcharts：添加一个自定义图像按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！