隐藏除选定数据系列之外的所有数据系列，HighCharts。

Question

我有一些使用Highcharts的折线图，我需要隐藏除用户选择的数据系列之外的所有内容。示例页面可以在http://opheliadesign.com/weight找到。

例如，在身体成分下，点击脂肪会隐藏骨头、水分和BMI，从而使身体脂肪的图表更易于查看。

谢谢！

- NightMICU

Answer 1

我不认为highcharts有“hideAll()”或类似的函数，但你可以尝试像这样做：

我不相信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
    }
}

当你选择一个系列时，你只需要调用那段代码即可。你可以通过使用图表事件来执行某种检查来完成这个操作。

- NT3RP

---

唯一的缺点是当有许多包含数百个数据点的系列时，隐藏延迟会相当大。 - Alvaro

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;
};

即使是大型系列，它也可以立即工作。

在50个以上的系列上使用.show().hide()已经需要超过2秒钟来切换可见系列(https://jsfiddle.net/rockshappy/nL5j2rLa/5/)

在这里使用setVisible是瞬间完成的(https://jsfiddle.net/rockshappy/nL5j2rLa/2/)。

- rockshappy

---

很完美。速度非常快！正好符合我的要求。 - kurtko