highcharts散點圖加載大批量數據性能問題及解決方案
在使用highcharts繪制圖表時，經常會遇到大批量數據加載導致界面卡頓或崩潰的問題。本文將針對一個實際案例，分析highcharts加載大批量散點圖時出現的問題，并提供相應的解決方案。
案例描述：
開發者使用vue2腳手架和highcharts版本”^11.1.0″繪制包含大量數據的折線圖和散點圖。折線圖能夠正常加載三十萬條數據，而散點圖加載一千條數據便出現性能問題，highcharts拋出警告“highcharts.JS:12 highcharts warning #12: www.highcharts.com/errors/12/”，界面無其他報錯信息。散點圖數據通過接口返回，而折線圖數據通過websocket分批次接收，全部數據接收完畢后再統一繪制。開發者嘗試了數據分批加載（setdata 和 addpoint 方法），但問題依然存在。
代碼分析：
代碼中，折線圖的數據處理邏輯是先通過websocket接收所有數據，然后使用setdata方法一次性繪制，這在處理大量數據時效率較高。而散點圖則采用分批次setdata方法，每次加載一部分數據。問題在于，highcharts默認存在一個性能閾值，當數據量超過該閾值時，會觸發性能警告，甚至導致渲染失敗。該閾值限制了setdata方法的效率，尤其在散點圖這種需要繪制大量標記點的圖表中。
解決方案：
highcharts 提供了 turbothreshold 屬性來控制性能閾值檢查。通過將 turbothreshold 設置為0，可以關閉性能閾值檢查，從而允許加載更大的數據集。
代碼修改：
在highcharts圖表配置中，添加如下代碼：
plotOptions: { series: { turboThreshold: 0 //設置0關掉性能閾值檢查，或者設置為你的數據量最大值 } },
通過設置 turbothreshold 為 0，可以解決highcharts加載大批量散點圖時遇到的性能問題，允許加載十萬級甚至更大的數據集。 需要注意的是，如果數據量過大，仍然可能導致瀏覽器性能瓶頸，建議結合其他優化手段，例如數據降采樣或使用highcharts的boost模塊進一步提升性能。
