如何修改highcharts图例项点击事件？

Posted 2023-02-16

【中文标题】如何修改highcharts图例项点击事件？

【英文标题】：How to modify highcharts legend item click event?

【发布时间】：2012-05-23 05:07:43

【问题描述】：

我需要修改 highcharts 图例项的点击事件。 Highcharts 演示 http://www.highcharts.com/demo/line-basic 。我想要例如：第一个动作将是一些警报，第二个动作将是默认动作（从图表中清除东京线）。谢谢。对不起，如果问题不干净。

【问题讨论】：

highcharts 有一个很棒的文档，其中包含 jsfiddle 示例，我确定您正在寻找的就是：highcharts.com/ref

上述更新的链接不再起作用。 api.highcharts.com/…

【参考方案1】：

你必须像下面的代码一样使用legendItemClick回调

plotOptions: 
        line: 

           events: 
                legendItemClick: function () 
                   alert('I am an alert');
                   //return false; 
                   // <== returning false will cancel the default action
                    
                
            ,
            showInLegend: true
        
    

这里是working fiddle，当您点击东京等图例然后隐藏东京线时会显示警报。

另请参阅plotOptions documentation 了解相关事件。根据您使用的图表类型，您需要放置的位置可能会有所不同。

【讨论】：

是的，就是这个！！感谢您的准确回答：）

禁用图例操作：legendItemClick: function (e) e.preventDefault()

有谁知道在禁用点击后如何将光标更改为图例上的默认值？

找到它：legend:itemStyle:

看来，那个 API 已经改变了，如果这个例子不适合你，请看下面 Tony 的回答。

【参考方案2】：

对我来说，legendItemClick 事件必须是针对系列的，而不是针对线的。例如：

plotOptions: 
        series: 
            events: 
                legendItemClick: function(event) 
                    var visibility = this.visible ? 'visible' : 'hidden';
                    if (!confirm('The series is currently '+ 
                                 visibility +'. Do you want to change that?')) 
                        return false;
                    
                
            
        
    ,

来自 Highcharts 的示例： http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-events-legenditemclick/