当前位置：首页 > news >正文

创建自定义 Highcharts 包使用文档说明

news 2026/6/28 15:22:49

由于使用 ES 模块，您可以创建自己的定制 Highcharts 包。使用自定义文件的一个好处是可以优化浏览器加载速度，因为文件体积更小，请求的文件也更少。

按照以下步骤开始操作。

安装 Highcharts

访问highcharts/highcharts
仓库，点击“代码”并选择“下载 ZIP”。下载完成后，将压缩包解压到想要的位置。

以下步骤需要 Node.js，您可以从
Node.js 官网下载并安装。Highcharts 支持长期支持（LTS）版本。

安装好 Node.js 后，打开你的命令行、终端或控制台，然后进入解压后的文件夹highcharts-master。在这里，你需要运行npm install来安装构建自定义 Highcharts 文件所需的依赖项。

创建一个自定义主文件

在你的编辑器中，进入解压后的文件夹highcharts-master/ts/masters/，并创建一个新文件，例如命名为custom.src.ts。在这个例子中，我们需要一个基本的折线图。为了实现这一点，我们需要一个列出所有必要 ES 模块的设置，如下所示：

/** * @license Highcharts JS v@product.version@ (@product.date@) * @module highcharts/highcharts * * (c) 2009-2024 Highcharts AS * * License: www.highcharts.com/license */'use strict';importHighchartsfrom'../Core/Globals.js';importSVGRendererfrom'../Core/Renderer/SVG/SVGRenderer.js';importChartfrom'../Core/Chart/Chart.js';importLineSeriesfrom'../Series/Line/LineSeries.js';constexports:Record<string,any>=Highcharts;exports.Renderer=SVGRenderer;exports.SVGRenderer=SVGRenderer;exports.Chart=Chart;exports.chart=Chart.chart;exports.LineSeries=LineSeries;exportdefaultHighcharts;

根据你的需求修改设置，然后继续下一步。请注意，导入的 ES 模块的顺序有时必须与每个文件的依赖关系相匹配。因此，额外的可选内容应放在最后。有关顺序信息，请参阅其他示例。

查看现有的主文件，获取类似的示例。

创建自定义包文件

运行npx gulp scripts --force来将所有包文件从主文件构建出来。也可以选择额外运行npx gulp scripts-compile，以获得压缩版本。

在我们的示例中，新的文件ts/masters/custom.src.ts变成了新的包文件code/custom.src.js。压缩版可以在
code/custom.js找到。你可以从code/文件夹中取出这些包文件，并在你的项目中使用它们。

对于兼容ESM的文件，你需要复制code/es-modules/文件夹。可以根据需要重命名这个文件夹。这个文件夹可能很大，但ESM只会从中挑选必要的文件用于你的项目。像parcel或webpack这样的打包工具可以帮助你在项目的最后阶段进一步优化加载时间。

如果你想在新包文件code/custom.src.js之外添加声明，请运行npx gulp jsdoc-dts --custom.

使用你的自定义包文件

根据我们的安装指南 installation ，你可以将自定义包文件作为ES6模块引用……

<html><body><divid="container"></div><scripttype="module">importHighchartsfrom'./esm/custom.js';Highcharts.chart('container',{series:[{type:'line',data:[1,32,42]}]});</script></body></html>

或者用传统方式，带有一个 script 标签：

<html><head><scriptsrc="custom.src.js"></script></head><body><divid="container"></div><script>Highcharts.chart('container',{series:[{type:'line',data:[1,32,42]}]});</script></body></html>