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