Скрыть все кроме выбранных рядов данных, HighCharts

Question

У меня есть несколько линейных графиков, использующих Highcharts, и мне нужно скрыть все, кроме ряда данных, выбранного пользователем.Пример страницы можно найти по адресу http://opheliadesign.com/weight.

Например, в разделе «Состав тела» нажатие на «Жир» скрывает кости, воду и ИМТ, что позволяет более легко просматривать график жировых отложений.

Спасибо!

Answer 1

Я не верю, что highcharts имеет hideAll() или подобную функцию, но вы можете попробовать что-то вроде этого:

//assuming chart is your chart
series = chart.series;
for(var i = 0; i < series.length; i++) {
    if(!series[i].selected) {
        series[i].hide();    //Hide the series
    }
}

Тогда вам нужно будет просто вызывать этот код всякий раз, когда вы выбираете серию. Возможно, вы могли бы сделать это, выполнив какую-то проверку, используя события диаграммы

Answer 2

Довольно старая ветка, но информация по-прежнему полезна.

Как отметил @Alvara, в сотнях серий использование .hide() или .show() довольно медленное (браузер останавливается несколько секунд).

Использование setVisible(false, false) и setVisible(true, false) намного быстрее:

legendItemClick: function (event) {
  if (!this.visible) return true;

  const series = this.chart.series;
  const serieLen = series.length;

  if (series.filter(s => s.visible).length === 1) {
    for (let i = 0; i < serieLen; i += 1) {
      series[i].setVisible(true, false);
    }
  } else {
    for (let i = 0; i < serieLen; i += 1) {
      series[i].setVisible(false, false);
    }
    series[this.index].setVisible(true, false);
  }
  return false;
};

Даже в больших сериях он работает мгновенно.

Использование .show().hide() для серии +50 уже занимает более 2 секунд для переключения видимой серии (https://jsfiddle.net/rockshappy/nL5j2rLa/5/)

Здесь использование setVisible происходит мгновенно (https://jsfiddle.net/rockshappy/nL5j2rLa/2/)