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

前言

由于公司业务需要,需要同时在前端渲染几万条数据。一开始采用的是highcharts，highcharts基本只能承受几千条的数据。之后换成了highstock，但是超过1w条数据是还是很卡顿，客户下了最后通牒，必须在下班前解决卡顿问题。没办法，只能找解决办法。

过程

一开始是通过人为缩减数据，比如一开始1w条，最后给他缩减成几千条，因为是折线图，少了几个点，基本上趋势不会发生大的改变，但是这办法治标不治本。而且有限制，如果去掉了极值点，就会使数据图发生较大的改变。

在highcharts中文官网上，资料都不是最新的，因此找不到对应的解决方法，后来在某个论坛上找到解决办法：使用boost插件。这个插件api只能在英文官网上查询到。这插件神了，几十万数据都不在话下，得了就他了。

boost插件链接

解决

1. 引入boost插件

// 第一种引入方式
const Highcharts = require("highcharts/highstock");
require("highcharts/modules/boost")(Highcharts);
// 第二种引入方式
import Boost from "highcharts/modules/boost.js";
Boost(Highcharts);

2. 配置boost

Highcharts.stockChart({
   // ...其他配置
    boost: {
        useGPUTranslations: true,
    },
    series,
})

3. 多数据列配置series

 const fmtSeries = series.map((item) => ({
      ...item,
      boostThreshold: 1,
      turboThreshold: 1,
 }));
 Highcharts.stockChart({
   // ...其他配置
    boost: {
        useGPUTranslations: true,
    },
   series:fmtSeries,
})