Highcharts 在 React / Vue / Next.js 中如何引入大数据量渲染 Boost

下面分别给你 Highcharts 在 React / Vue / Next.js 中引入 Boost 的常见方式。Boost 本身是 Highcharts 的模块，核心思路都是：先加载 Boost 模块，再渲染图表。

1) React（推荐：@highcharts/react）

如果你在用我们新的 React 集成，直接用模块组件即可：

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Chart } from '@highcharts/react';
import { Boost } from '@highcharts/react/modules/Boost';
import { LineSeries } from '@highcharts/react/series/Line';

function App() {
const data = Array.from({ length: 50000 }, (_, i) => Math.sin(i / 50) * 100 + i / 10);

return (
<Chart>
<Boost seriesThreshold={1} useGPUTranslations />
<LineSeries boostThreshold={1} data={data} />
</Chart>
);
}

createRoot(document.getElementById('container')!).render(<App />);

要点：

• Boost 是模块组件，放在 <Chart> 内即可。
• boostThreshold 控制单个 series 何时进入 boost。
• seriesThreshold 控制图表中 series 数量达到多少时启用 boost。

文档：

• Boost 模块：https://www.highcharts.com/docs/advanced-chart-features/boost-module
• React Boost 组件：https://www.highcharts.com/docs/react/components/modules/boost

2) Vue

Vue 中一般是在组件里先导入并初始化 Boost 模块，再创建图表配置。

<script setup>
import Highcharts from 'highcharts';
import BoostModule from 'highcharts/modules/boost';
import HighchartsVue from 'highcharts-vue';
import { ref } from 'vue';

if (typeof BoostModule === 'function') {
BoostModule(Highcharts);
}

const chartOptions = ref({
chart: {
type: 'line'
},
boost: {
seriesThreshold: 1,
useGPUTranslations: true
},
series: [{
boostThreshold: 1,
data: Array.from({ length: 50000 }, (_, i) => Math.sin(i / 50) * 100 + i / 10)
}]
});
</script>

<template>
<highcharts :options="chartOptions" />
</template>

要点：

• 在使用图表前加载 highcharts/modules/boost。
• 通过 boost 和 series[].boostThreshold 配置启用。
• 如果你使用的是某个 Vue 封装库，通常仍然是“先初始化模块，再传 options”。

3) Next.js

Next.js 里最重要的是：Highcharts 相关代码只在客户端运行，因为它依赖 DOM。

App Router / React Server Components

在组件文件顶部加：

'use client';

然后像 React 一样使用：

'use client';

import React from 'react';
import { Chart } from '@highcharts/react';
import { Boost } from '@highcharts/react/modules/Boost';
import { LineSeries } from '@highcharts/react/series/Line';

export function BoostChart() {
const data = Array.from({ length: 50000 }, (_, i) => Math.sin(i / 50) * 100 + i / 10);

return (
<Chart>
<Boost seriesThreshold={1} useGPUTranslations />
<LineSeries boostThreshold={1} data={data} />
</Chart>
);
}

Pages Router

建议用动态导入关闭 SSR：

import dynamic from 'next/dynamic';

const BoostChart = dynamic(() => import('../components/BoostChart'), {
ssr: false
});

export default function Page() {
return <BoostChart />;
}

使用注意事项

1. Boost 不是“万能加速”

它适合大数据量，但会牺牲部分细节交互，例如：

• 某些点级交互
• data labels
• 复杂 marker 效果
• 部分 hover / tooltip 行为

2. 混合图表要测试交互

当 boosted series 和非 boosted series 混用时，某些交互会受影响。尤其要留意：

• plotOptions.series.stickyTracking
• tooltip
• legend
• 点击事件

3. 常见建议

• 大数据尽量用简单数据结构
• 缩放后让 SVG 接管细节
• 能用 Boost 的系列优先让它自动触发
• 视情况配合 Stock 的 dataGrouping

4. 版本差异

如果你在用较新的 Highcharts 版本，ESM 导入方式通常更顺手；老项目可能还会看到 highcharts/modules/boost 的写法。