编辑 Highcharts Legend 上的点击事件答案

【问题标题】：Edit click event on Highcharts Legend编辑 Highcharts Legend 上的点击事件
【发布时间】：2020-10-01 10:55:49
【问题描述】：

我正在尝试编辑 Highcharts 图例项的点击事件。当前设置允许在单击图例项时切换真/假。相反，我希望单击图例项以将所有其他系列的可见性设置为 false，但单击的项目除外（基本上与现在的操作相反）。

我尝试构建一个 JSfiddle 来切换所有系列，但没有运气。见link

关键部分在这里：

  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
  }

单击图例项时，我尝试抓取图表和所有系列，然后循环浏览它们以切换可见性。

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

这是另一种方法，您可以使用 plotOptions.series.events.legendItemClick 回调为所有系列实现所需的结果。

演示：http://jsfiddle.net/BlackLabel/vsj96c5x/

  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.com/highcharts/plotOptions.series.events.legendItemClick

【讨论】：

【解决方案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.net/Lamjdhy3/1/

【讨论】：