Highcharts：添加自定义图像按钮

发布于 2025-01-04 16:43:16 字数 662 浏览 1 评论 0原文

我想在高图表上添加图像按钮。到目前为止，我已经成功创建了一个图像按钮并在其上附加了一个单击事件。但问题是，图像（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
        }

    }
}

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

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

分开我的手 2025-01-11 16:43:16

最后我是这样想出来的。
也许它会帮助其他人。

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

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

回复收藏 0 原文

~没有更多了~