根據需要更新許多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的時間間隔，我獲得了更好的性能，並且可以看到動畫，但它使它有點呆滯。設置更高的超時時間會導致頁面難以瀏覽，並且過濾器更改會疊加，因爲整個圖形更新需要很長時間。

Answer 1

根據我的經驗，當我有大量的圖表或數據點時，我通常關閉動畫。動畫在處理開銷上增加了很多，如果沒有它，highcharts通常會很好地處理大量數據。

我想你可以嘗試刪除系列，併爲每個圖表添加新的一次，而不是全部刪除，然後添加全部。我懷疑這與你的頁面響應速度有很大不同。

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

Answer 2

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

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