前言
由于公司业务需要,需要同时在前端渲染几万条数据。一开始采用的是highcharts，highcharts基本只能承受几千条的数据。之后换成了highstock，但是超过1w条数据是还是很卡顿，客户下了最后通牒，必须在下班前解决卡顿问题。没办法，只能找解决办法。
过程
一开始是通过人为缩减数据，比如一开始1w条，最后给他缩减成几千条，因为是折线图，少了几个点，基本上趋势不会发生大的改变，但是这办法治标不治本。而且有限制，如果去掉了极值点，就会使数据图发生较大的改变。
在highcharts中文官网上，资料都不是最新的，因此找不到对应的解决方法，后来在某个论坛上找到解决办法：使用boost插件。这个插件api只能在英文官网上查询到。这插件神了，几十万数据都不在话下，得了就他了。
解决
- 引入boost插件
// 第一种引入方式
const Highcharts = require("highcharts/highstock");
require("highcharts/modules/boost")(Highcharts);
// 第二种引入方式
import Boost from "highcharts/modules/boost.js";
Boost(Highcharts);
- 配置boost
Highcharts.stockChart({
// ...其他配置
boost: {
useGPUTranslations: true,
},
series,
})
- 多数据列配置series
const fmtSeries = series.map((item) => ({
...item,
boostThreshold: 1,
turboThreshold: 1,
}));
Highcharts.stockChart({
// ...其他配置
boost: {
useGPUTranslations: true,
},
series:fmtSeries,
})
