javascript - 按需更新许多 Highcharts 实例的最佳性能

Question

我目前有一个包含一些 Highcharts 图形的页面，大约 22 个，它们受用户可选择的过滤器的影响。每个过滤器交互都会删除当前系列并添加新系列。

我从两种方法开始，第一种是循环遍历所有保存的实例对象，删除每个系列，

while currentChart.series.length > 0
  currentChart.series[currentChart.series.length - 1].remove()

然后，在另一个遍历数组的循环之后搜索过滤器数据和

currentChart.addSeries
  name: operatorName
  data: data
  type: options.chartType

但结果证明这个实现相当繁重。

然后我实现了一个超时，让插件呼吸一点，不要堆叠太多，通过在每个循环之间设置一个 1ms 的超时，我得到了更好的性能并且可以看到动画，但这让它有点迟钝。设置更高的超时会使页面难以导航，并且过滤器更改会堆叠，因为整个图形更新将花费很多时间。

score 3 · Accepted Answer

根据我的经验，当我有大量图表或数据点时，我通常会关闭动画。动画增加了很多处理开销，没有它，highcharts 通常可以很好地处理大量数据。

我想您可以尝试删除该系列并一次为每个图表添加新的，而不是先删除所有然后添加所有。不过，我怀疑这会对您的页面响应能力产生很大的影响。

  chart: {
      animation: false
  },
  plotOptions: {
        series: {
            animation: false
        }
  },

score 0 · Accepted Answer

while currentChart.series.length > 0
  currentChart.series[0].destroy()

2 回答 2