Question

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

例如，在Body Composition下，单击Fat会隐藏骨骼，水和BMI - 从而可以更容易地查看体脂肪图。

谢谢！

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

然后，只要您选择一个系列，就需要调用该代码。您可以通过使用chart events

执行某种检查来执行此操作

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/）

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

2 个答案: