使用Highcharts与React集成 官网文档使用说明

开始使用

该版本已经过测试：

• Highcharts npm 包 版本 11.4.8 及更新版本
• Vite 配合 plugin-react 版本 4.3.3 及更新版本
• React 和 react-dom 版本 18.3.1 及更新版本

1. 从 npm 安装 Highcharts 和 highcharts-react

通过运行以下命令安装 Highcharts 包以及我们的 React integration 集成：

npm install highcharts @highcharts/react

2. 添加基础组件

在你的 JSX 文件中，导入你需要的组件：

import {
    Chart,
    Series,
    Title
} from '@highcharts/react';

3. 创建你的图表

现在，你可以像这样创建一个简单的图表：

function ChartComponent () {
  return (
    <Chart>
      <Title>Line chart</Title>
      <Series type="line" data={[1, 2, 3]} />
    </Chart>
  )
}

4. 加载模块（可选）

如果你想加载额外的 Highcharts 模块，可以使用 setHighcharts 函数：

import { Chart, setHighcharts } from '@highcharts/react';
import Highcharts from 'highcharts/highcharts';
import 'highcharts/modules/exporting';
import 'highcharts/modules/accessibility';
setHighcharts(Highcharts);
export function ChartWithCustomHC () {
  return (
      <Chart>
        <Series
          type="line"
          data={[1, 2, 3, 4, 5]}
        />
      </Chart>
    );
}

关于配置图表的更详细信息，请参阅 图表和系列 组件的文档， 以及 如何设置选项。

结果应该是这样的：

更新发布与 2026 年 1 月 30 日