javascript Highcharts:添加自定义图片按钮

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9218490/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 05:58:32  来源:igfitidea点击:

Highcharts: Add a custom image button

javascriptjqueryhighcharts

提问by Jashwant

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 ?

我想在 highcharts 上添加图像按钮。到目前为止,我已经成功创建了一个图像按钮并在其上附加了一个点击事件。但问题是,图像 (sun.png) 位于图表左侧,图像按钮右对齐(工具栏的默认位置)。有什么解决办法吗?

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.

另外,如果有其他方法可以在具有点击事件的图表中添加图像,也欢迎使用这些方法。

回答by Jashwant

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