highcharts|highcharts 解决几万条几十万条大数据量卡顿问题 highcharts解决几万条几十万条大

前言由于公司业务需要,需要同时在前端渲染几万条数据。一开始采用的是highcharts，highcharts基本只能承受几千条的数据。之后换成了highstock，但是超过1w条数据是还是很卡顿，客户下了最后通牒，必须在下班前解决卡顿问题。没办法，只能找解决办法。
过程一开始是通过人为缩减数据，比如一开始1w条，最后给他缩减成几千条，因为是折线图，少了几个点，基本上趋势不会发生大的改变，但是这办法治标不治本。而且有限制，如果去掉了极值点，就会使数据图发生较大的改变。
在highcharts中文官网上，资料都不是最新的，因此找不到对应的解决方法，后来在某个论坛上找到解决办法：使用boost插件。这个插件api只能在英文官网上查询到。这插件神了，几十万数据都不在话下，得了就他了。
【highcharts|highcharts 解决几万条几十万条大数据量卡顿问题】boost插件链接
解决

引入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, })