Javascript 如何修改highcharts图例项目点击事件?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/10604952/
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
How to modify highcharts legend item click event?
提问by alexche8
I need to modify click event on highcharts legend items. Highcharts demo http://www.highcharts.com/demo/line-basic. I want for example: first action will be some alert and second action will be action by default(clean Tokyo line from chart). Thanks. Sorry if question not clean.
我需要修改 highcharts 图例项目上的点击事件。Highcharts 演示 http://www.highcharts.com/demo/line-basic。我想例如:第一个动作将是一些警报,第二个动作将是默认动作(从图表中清除东京线)。谢谢。对不起,如果问题不干净。
回答by Prasenjit Kumar Nag
You have to use the legendItemClick
callback like the following code
你必须legendItemClick
像下面的代码一样使用回调
plotOptions: {
line: {
events: {
legendItemClick: function () {
alert('I am an alert');
//return false;
// <== returning false will cancel the default action
}
}
,
showInLegend: true
}
}
Here is working fiddlewhich shows alert when you click on legends like on Tokyo and then hide Tokyo line.
这是工作小提琴,当您单击东京等传说然后隐藏东京线时,它会显示警报。
See also the plotOptions documentationfor the event in question. Where you need to place this may differ depending on what chart type you are using.
另请参阅相关事件的plotOptions 文档。您需要放置的位置可能因您使用的图表类型而异。
回答by Tony
For me, the legendItemClick event had to be for the series, not the line. E.g.:
对我来说,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;
}
}
}
}
},
Example from Highcharts: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-events-legenditemclick/
Highcharts 示例:http: //jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-events-legenditemclick/