编辑 Highcharts 图例上的点击事件

Question

I'm trying to edit the click event for a Highcharts legend item. The current setup allows that on click of legend item, it toggles true/false. Instead, I want on click of legend item to set visibility of all other series to false, except the item that was clicked (essentially the inverse of what it does now).

I've tried build a JSfiddle to just toggle all series with no luck. See link

Key section is here:

  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
  }

On click of a legend item I try to grab the chart and all series, then cycle through each of them to toggle visibility.

Answer 1

You could try something like this:

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/

Answer 2

Here is another approach how you can achieve wanted result for all series using the plotOptions.series.events.legendItemClick callback.

Demo: 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