【问题标题】:How to modify highcharts legend item click event?如何修改highcharts图例项点击事件?
【发布时间】:2012-05-23 05:07:43
【问题描述】:

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

【问题讨论】:

标签: javascript jquery highcharts


【解决方案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/

【讨论】:

    猜你喜欢
    • 2022-07-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多