Highcharts: серия с сюжетными линиями.Показывать только одну серию за раз

Question

У меня есть сюжетная линия для каждой серии в столбце диаграммы. В настоящее время серия отображается только тогда, когда диаграмма видна, но я хотел бы добавить функциональность, при которой нажатие на элемент легенды показывает этот элемент и его сюжетную линию, но скрывает все остальные серии / сюжетные линии. Вот скрипка с текущим кодом: https://jsfiddle.net/nhrmc/5d46bL2f/

Скрипку можно найти здесь: https://jsfiddle.net/nhrmc/5d46bL2f/

var chart = Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
yAxis: {
plotLines: [{
  value: 50,
  color: 'red',
  width: 2,
  id: 'plot-line-1'
}]
},

series: [{
events: {
  show: function() {
    chart.yAxis[0].addPlotLine({
      value: 7,
      color: 'red',
      width: 2,
      id: 'plot-line-1'
    });
  },
  hide: function() {
    chart.yAxis[0].removePlotLine('plot-line-1')
  }
},
 data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
type: 'column',
}, {
events: {
  show: function() {
    chart.yAxis[0].addPlotLine({
      value: 75,
      color: 'blue',
      width: 2,
      id: 'plot-line-2'
    });
  },
  hide: function() {
    chart.yAxis[0].removePlotLine('plot-line-2')
  }
},
data: [20, 70, 100, 125, 140, 176.0, 132, 145, 21.4, 191, 96, 54],
type: 'column',
visible: false
}
]
});

Я ожидаю щелкнуть «Серия 2» в легенде и показать ее вместе со связанной сюжетной линией, а также скрыть серию 1 и связанную сюжетную линию. Поэтому должна отображаться только одна серия / сюжетная линия.

Answer 1

В legendItemClick функции обратного вызова вы можете скрыть все остальные серии и сюжетные линии:

plotOptions: {
    series: {
        events: {
            legendItemClick: function() {
                this.chart.series.forEach(function(s) {
                    if (s !== this && s.visible) {
                        s.hide();
                    }
                });

                return !this.visible ? true : false
            }
        }
    }
}

Демонстрационная версия: https://jsfiddle.net/BlackLabel/os86px7v/

Справочник по API: https://api.highcharts.com/highcharts/plotOptions.series.events.legendItemClick