编辑点击Highcharts Legend上的事件

Question

我正在尝试编辑一个Highcharts图例项的点击事件。当前的设置允许在点击图例项时，它切换为 "true-false"。相反，我想在点击图例项时，将所有其他系列的可见性设置为false，除了被点击的项（本质上与现在的做法相反）。

我试着建立一个JSfiddle来切换所有系列，但没有成功。请看 联系

关键部分在这里。

  legendItemClick: function() {
    var chart = Highcharts.chart;
    var series = chart.series;
    for (item in series) {
        if (series[item].visible) {
            series[item].hide();
        } else {
            series[item].show();
        }    
    };        
    return false
  }

在点击一个图例项时，我试图抓住图表和所有系列，然后在每个系列中循环以切换可见性。

Answer 1

这里是另一种方法，你如何可以实现所有系列的想要的结果，使用的是 plotOptions.series.events.legendItemClick 回调。

演示。http:/jsfiddle.netBlackLabelvsj96c5x。

  plotOptions: {
    series: {
      events: {
        legendItemClick(e) {
          e.preventDefault();
          let chart = this.chart;

          chart.series.forEach(s => {
            if (s !== this && s.visible) {
              s.hide();
            } else {
              s.show();
            }
          })
        }
      }
    }
  },

API。https:/api.highcharts.comhighchartsplotOptions.series.event.legendItemClick。

Answer 2

你可以试试这样的方法。

var mychart = Highcharts.chart('container', {
  series: [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
    events: {
      legendItemClick: function() {
        return false
      }
    }
  }, {
    name: 'Manufacturing',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
    events: {
      legendItemClick: function() {
        var numSeries = mychart.series.length;
        for (var i=0 ; i<numSeries ; i++) {
          if (mychart.series[i] != this) {
              if (mychart.series[i].visible == true) {
                mychart.series[i].hide();
              } else {
                mychart.series[i].show();
              }
          }
        }
        return false
      }
    }
  }, {
    name: 'Sales & Distribution',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
  }]
});

http:/jsfiddle.netLamjdhy31。