如何修改Highcharts图例项的单击事件？

Question

如何修改Highcharts图例项的单击事件？

54

我需要修改highcharts图例项中的点击事件。高级图表演示http://www.highcharts.com/demo/line-basic。举个例子：第一个动作将是一些警报，第二个动作将是默认操作（从图表中清除东京线）。谢谢。如果问题不够清晰，请见谅。

- alexche8

2

Highcharts拥有出色的文档和JSFiddle示例，我相信你正在寻找的内容都在这里：http://www.highcharts.com/ref/。 - Ricardo Binns

1

更新的链接如上所述已不再可用。http://api.highcharts.com/highcharts#plotOptions.column.events.legendItemClick - hubson bropa

2个回答

12

对我来说，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/

- Tony

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Prasenjit Kumar Nag · Accepted Answer

您需要使用legendItemClick回调函数，如以下代码：

plotOptions: {
        line: {

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

这里有一个可运行的 fiddle，当您单击类似于 Tokyo 的传说时，会显示警报，然后隐藏东京线。

此外，有关所讨论事件的文档，请参见plotOptions 文档。您需要放置它的位置可能会因您使用的图表类型而异。