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

Best performance for updating many Highcharts instances on demand

本文关键字：最佳 性能 实例 Highcharts 更新 许多      更新时间：2023-09-26

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

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

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

然后，在另一个循环之后，通过数组搜索过滤器数据，然后

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

但事实证明，这种实现非常繁重。

然后我实现了一个超时，让插件喘口气并且不会堆叠那么多，通过在每次循环之间设置 1ms 超时，我获得了更好的性能，可以看到动画，但它让它有点迟钝。设置较高的超时会使页面难以导航，并且筛选器更改会堆叠，因为整个图形更新将花费大量时间。

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

我想您可以尝试删除该系列并一次为每个图表添加新序列，而不是全部删除然后全部添加。不过，我会加倍这会对您的页面响应能力大不相同。

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

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

例如：http://jsfiddle.net/5B9c7/1/

相关文章：