Highcharts React v5 正式发布：支持 ESM、更简洁的组件、更出色的开发体验

Highcharts React v5 正式发布！这是一次重大更新，专注于提升在现代 React 应用中使用 Highcharts 的开发体验。

本次发布引入了纯 ESM 模块系统、对 Vite 等现代构建工具的更好兼容性、扩展的组件 API，以及更多可声明式使用的 React props，用于常见的图表和系列配置。

请继续阅读，了解 v5 中的新特性和改进。

重要提示：Highcharts React v5 引入了多项破坏性变更。升级前请务必查阅 v5 迁移指南。

现代 ESM 支持与更好的 Tree Shaking

Highcharts React v5 现在使用纯 ES Module（ESM）模块系统。

由于 ESM 让打包工具更容易分析依赖关系，Webpack、Vite 和 Rollup 等工具能够更好地识别并移除生产打包中的未使用代码。

这帮助开发者构建更精简的应用，同时让 Highcharts React 更紧密地贴合现代 JavaScript 构建工具和工作流。

更具声明性、更灵活的 React 组件

Highcharts React v5 扩展了大量常用图表和系列配置项，可直接作为组件 props 传递，使图表配置更具声明性，在 React 应用中更易使用。

常用图表配置项直接作为 props 暴露

Chart 组件现在直接将大量常用图表配置项作为 props 暴露，包括：

subtitle
caption
credits
type
height
width
inverted
animation
styledMode
backgroundColor
borderColor
margin
spacing
colors

这减少了将常用设置放入庞大配置对象中的需要，使图表配置在 React 应用中更易阅读、组合和维护。

更多内容请参阅我们关于 Chart 组件的文档。

使用组件包装实现更简洁的代码

Highcharts React v5 引入了对组件包装（component wrapping）的支持，使在 React 应用中组织和复用复杂图表元素变得更加容易。

例如，开发者无需在 Chart 组件中直接定义庞大的自定义 tooltip，而是可以将该逻辑移入一个可复用的组件，比如 FinancialTooltip。

jsx 复制代码

function FinancialTooltip() {
  return (
    <Tooltip shared>
      <div data-hc-option="headerFormat">
        <b>{"{point.key}"}</b>
      </div>
      <div data-hc-option="pointFormat">
        {"{series.name}: "}
        <b>{"${point.y}"}</b>
      </div>
    </Tooltip>
  );
}

然后，这个自定义组件可以直接在主图表结构中使用：

jsx 复制代码

<Chart>
  <Title>Financials</Title>
  <FinancialTooltip />
  <XAxis categories={MONTHS} />
  <ColumnSeries data={data.revenue} name="Revenue" />
  <ColumnSeries data={data.costs} name="Costs" />
  <ProfitSeries revenue={data.revenue} costs={data.costs} />
</Chart>

这有助于保持图表代码更简洁、更易维护，同时让共享的图表模式更容易在组件和应用之间复用。

更多内容请参阅我们关于组件包装的文档。

扩展的模块组件

更多 Highcharts 模块现在已可作为 React 组件使用，包括：

Boost
BrokenAxis
DraggablePoints
StockTools

这让高级 Highcharts 功能更容易直接集成到 React 应用中。

完整的修复和改进列表请查看更新日志。

开始使用 Highcharts React v5

Highcharts React v5 现已在 npm 上发布。

bash 复制代码

npm i @highcharts/react

请记住，v5 在模块导入路径、ESM 打包、Vite 兼容性和类型命名方面引入了多项破坏性变更。

升级说明和迁移示例请参阅 v5 迁移指南。

如有任何问题，欢迎提交 GitHub 交流讨论。