# @amcharts/amcharts5 中文文档 规范地址：https://npmcn.com/package/%40amcharts/amcharts5/ 版本：5\.21\.5 npm 元数据更新时间：2026-10-26T06:46:18.284Z 中文译文更新时间：2026-11-06T00:13:24.017Z 软件包许可：SEE LICENSE IN LICENSE 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40amcharts/amcharts5 原文对照：https://npmcn.com/package/%40amcharts/amcharts5/?lang=original 项目主页：https://docs.amcharts.com/v5/ 源码仓库：https://github.com/amcharts/amcharts5 ## 关键信息（来自 npm 元数据） - 包体积（解压后）：27.5 MB，2235 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：25 个 - 首次发布：2021-08-13T08:35:52.200Z - 最新版本发布：2026-10-26T06:46:17.932Z - 近 30 天下载量：1444513（2026-10-06 至 2026-11-04，npm 官方下载统计） - 已发布版本数：267（近 12 个月 33 个） ## 中文简介 JavaScript 和 TypeScript 图表和地图: XY, 派, 地图, 股票, 甘特, 等级, 流, 雷达和时序图, 在画布上或作为 SVG ## 安装 ```sh npm install @amcharts/amcharts5 ``` 也可以使用：`pnpm add @amcharts/amcharts5`、`yarn add @amcharts/amcharts5`、`bun add @amcharts/amcharts5` ## README # 图表5 网络的 JavaScript 和 TypeScript 图表和地图:行、列、 区域和 烛台图、馅饼和漏斗、地理图、股票图、甘特 图表、树图和其他等级图、Sankey和和弦图、雷达和 仪表,时间表,字云和文能图. [![Stock chart with volume and a toolbar](https://raw.githubusercontent.com/amcharts/amcharts5/master/examples/thumbs/stock-chart.webp)](https://github.com/amcharts/amcharts5/tree/master/examples/shared/stock-chart) [![Globe with satellite imagery](https://raw.githubusercontent.com/amcharts/amcharts5/master/examples/thumbs/map-satellite-globe.webp)](https://github.com/amcharts/amcharts5/tree/master/examples/shared/map-satellite-globe) [![Sunburst](https://raw.githubusercontent.com/amcharts/amcharts5/master/examples/thumbs/hierarchy-sunburst.webp)](https://github.com/amcharts/amcharts5/tree/master/examples/shared/hierarchy-sunburst) [![Sankey diagram](https://raw.githubusercontent.com/amcharts/amcharts5/master/examples/thumbs/flow-sankey.webp)](https://github.com/amcharts/amcharts5/tree/master/examples/shared/flow-sankey) [![Gantt chart](https://raw.githubusercontent.com/amcharts/amcharts5/master/examples/thumbs/gantt-multilevel.webp)](https://github.com/amcharts/amcharts5/tree/master/examples/shared/gantt-multilevel) [![Pixel map](https://raw.githubusercontent.com/amcharts/amcharts5/master/examples/thumbs/map-pixel-map.webp)](https://github.com/amcharts/amcharts5/tree/master/examples/shared/map-pixel-map) [![Gauge with colored bands](https://raw.githubusercontent.com/amcharts/amcharts5/master/examples/thumbs/gauge-bands.webp)](https://github.com/amcharts/amcharts5/tree/master/examples/shared/gauge-bands) [![Stacked column chart](https://raw.githubusercontent.com/amcharts/amcharts5/master/examples/thumbs/xy-stacked-column.webp)](https://github.com/amcharts/amcharts5/tree/master/examples/shared/xy-stacked-column) 每个图片都链接到其示例代码. [演示文稿](https://www.amcharts.com/demos/) | [文档](https://docs.amcharts.com/v5/) | [类参考](https://docs.amcharts.com/v5/reference/) | [更改日志](https://github.com/amcharts/amcharts5/blob/master/packages/shared/CHANGELOG.md) | [下载](https://www.amcharts.com/download/) ## 安装 Npm, 对于使用捆绑器的项目: ``` npm install @amcharts/amcharts5 ``` 类型定义随之而来,需要TypeScript 5.0或更晚. 带有脚本标记,来自 CDN 或来自文件 [zip 下载](https://www.amcharts.com/download/)数字 : ```html ``` 地图需要地图文件(geodata),它们是一个单独的软件包: [无](https://www.npmjs.com/package/@amcharts/amcharts5-geodata), (中文(简体) ), [GitHub 图像](https://github.com/amcharts/amcharts5-geodata), (中文(简体) ), [拉链](https://www.amcharts.com/download/)。 。 。 . ## 第一个图表 页面需要一个高度的元素 : ```html
``` ```js import * as am5 from "@amcharts/amcharts5"; import * as am5xy from "@amcharts/amcharts5/xy"; import am5themes_Animated from "@amcharts/amcharts5/themes/Animated"; const root = am5.Root.new("chartdiv"); root.setThemes([ am5themes_Animated.new(root) ]); const chart = root.container.children.push(am5xy.XYChart.new(root, {})); const xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, { categoryField: "country", renderer: am5xy.AxisRendererX.new(root, {}) })); const yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererY.new(root, {}) })); const series = chart.series.push(am5xy.ColumnSeries.new(root, { xAxis: xAxis, yAxis: yAxis, categoryXField: "country", valueYField: "visits" })); const data = [ { country: "France", visits: 1114 }, { country: "Germany", visits: 1322 }, { country: "Spain", visits: 711 }, { country: "Italy", visits: 984 } ]; xAxis.data.setAll(data); series.data.setAll(data); ``` 有了脚本标记,没有三个代码的代码是相同的 `import` 线条: 每行 文件使其模块成为同名的全局( q)`am5`, (中文(简体) ), `am5xy`, (中文(简体) ), `am5themes_Animated`) (中文(简体) ). ## 反应、 Vue、 角和斯维尔特 每个都有一个包裹。 它用组件创建图表并处理它 与它一起,与服务器渲染(Next.js, Nuxt, SvelteKit, Angular SSR)合作 因为它只装入浏览器中的库,并使用用 代码或 JSON 配置 : | 框架 | 软件包 | 代码图表 | JSON 配置图 | | --- | --- | --- | --- | | 反应 | [`@amcharts/amcharts5-react`](https://github.com/amcharts/amcharts5/tree/master/integrations/react) | `useAmChart(setup, deps)` | `` | | 阴道 | [`@amcharts/amcharts5-vue`](https://github.com/amcharts/amcharts5/tree/master/integrations/vue) | `useAmChart(templateRef, setup)` | `` | | 角质 | [`@amcharts/amcharts5-angular`](https://github.com/amcharts/amcharts5/tree/master/integrations/angular) | `
` | `` | | 丝绒 | [`@amcharts/amcharts5-svelte`](https://github.com/amcharts/amcharts5/tree/master/integrations/svelte) | `
` | `` | 对于反应土著, [`@amcharts/amcharts5-react-native`](https://github.com/amcharts/amcharts5/tree/master/integrations/react-native) 从 JSON 配置中绘制网络视频中的图表(``(中文(简体) ) 或从图表代码中指定为字符串(``) (中文(简体) ). 每个软件包的README都有完整的示例. 没有软件包,请创建图表 当组件被挂起并调用时 `root.dispose()` 当它被清除时; 有指南用于: [反应](https://docs.amcharts.com/v5/getting-started/integrations/react/), (中文(简体) ), [角质](https://docs.amcharts.com/v5/getting-started/integrations/angular/), (中文(简体) ), [阴道](https://docs.amcharts.com/v5/getting-started/integrations/vue/), (中文(简体) ), [下一个.js](https://docs.amcharts.com/v5/getting-started/integrations/next-js/) 财务报告和审定财务报表 [其他人员](https://docs.amcharts.com/v5/getting-started/integrations/)。 。 。 . ## 图表类型 | 图表 | 模块 | 脚本文件 | | --- | --- | --- | | [第十六届](https://docs.amcharts.com/v5/charts/xy-chart/):行,行,行,行,行,散,烛台 | `@amcharts/amcharts5/xy` | `xy.js` | | [馅饼和切片](https://docs.amcharts.com/v5/charts/percent-charts/):派,甜甜圈,漏斗,金字塔 | `@amcharts/amcharts5/percent` | `percent.js` | | [地图](https://docs.amcharts.com/v5/charts/map-chart/) | `@amcharts/amcharts5/map` | `map.js` | | [库存](https://docs.amcharts.com/v5/charts/stock/) | `@amcharts/amcharts5/stock` | `stock.js` | | [甘特语](https://docs.amcharts.com/v5/charts/gantt/) | `@amcharts/amcharts5/gantt` | `gantt.js` | | [等级](https://docs.amcharts.com/v5/charts/hierarchy/):树图,出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出入出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出来 | `@amcharts/amcharts5/hierarchy` | `hierarchy.js` | | [流动](https://docs.amcharts.com/v5/charts/flow-charts/): 三键,和弦,弧图 | `@amcharts/amcharts5/flow` | `flow.js` | | [雷达和测量仪](https://docs.amcharts.com/v5/charts/radar-chart/) | `@amcharts/amcharts5/radar` | `radar.js` | | [时间线](https://docs.amcharts.com/v5/charts/timeline/):蛇形、螺旋、曲线 | `@amcharts/amcharts5/timeline` | `timeline.js` | | [词云](https://docs.amcharts.com/v5/charts/word-cloud/) | `@amcharts/amcharts5/wc` | `wc.js` | | [维恩](https://docs.amcharts.com/v5/charts/venn/) | `@amcharts/amcharts5/venn` | `venn.js` | 库存、甘特、雷达和时间表图基于XY图:有脚本 标记,装入 `xy.js` 在他们面前。 甘特还需要 `plugins/colorPicker.js`。 。 。 . 图书馆里还有: - 地图:地球和平面地图、昼夜卫星图像、像素地图, 并绘制世界、大陆、国家及其区域的地图. - 股票图表:超过30个指标,绘图工具,比较股票和时期 选择者. - [导出](https://docs.amcharts.com/v5/concepts/exporting/)(原始内容存档于2018-09-21) (英语). PNG, JPG,, SVG,PDF,CSV,XLSX,JSON和HTML,以及打印. - [30个主题](https://docs.amcharts.com/v5/concepts/themes/)其中 黑暗的,色盲的和反应迅速的. - [无障碍](https://docs.amcharts.com/v5/concepts/accessibility/)数字 : 键盘导航和屏幕阅读器支持. ## 实例 大约80个例子与库一起出现,每个小图. - 在拉链下载中, 打开 `examples/index.html`: 每一幅画廊 示例高于其来源. - 在 npm 包中,它们是来源 : `examples//index.ts`索引 `examples/README.md` 财务报告和审定财务报表 `examples/examples.json`。 。 。 . - 更多,更大的, 正在进入 [演示](https://www.amcharts.com/demos/) 在网站上. ## JSON和SVG的图表 图表可以描述为 [a JSON 配置](https://docs.amcharts.com/v5/concepts/serializing/) 搭建时 `JsonParser`,则运行图可以保存为一体。 多数 例子与他们的配置. 这个 `` 元素从配置中构建一个没有图表代码的图表 全部,适合仅使用 HTML 的平面页面、框架和工具: ```html ``` 配置来自 `src`从 a `config` 属性,或从 `config` 属性。 带有脚本标签, 装入 `plugins/json.js` 在此之前 `element.js`,以及 配置所用的每个图表类型的文件; 与 npm, `import "@amcharts/amcharts5/element";` 定义元素, 图表类型加载本身,主题被指定为类: `element.themes = [am5themes_Animated]`。带有设置的主题是一对, `[am5themes_Adaptive, { baseColor: "#4150a0" }]` (在属性中,JSON: `themes='["Animated", ["Adaptive", { "baseColor": "#4150a0" }]]'`) (中文(简体) ). 一个配置 命名其地理数据和地貌(`"geoJSON": "am5geodata_worldLow"`页:1 带有脚本标签的全域; 带有 npm, 将其输入 `resources`数字 : `element.resources = { am5geodata_worldLow }`. 一旦图表建成, `element.root` 财务报告和审定财务报表 `element.chart` 拿着; `element.whenReady()` 返回 a 誓以报应,和单位的派遣 `ready` (或 `error`) (中文(简体) ). 在画布上绘制图表。 要绘制一个为 SVG , 请用 `am5.Root.new("chartdiv", { renderer: am5.SVGRenderer })`。 。 。 . ## 使用 AI 编码代理 图书馆里有代理商需要的东西, 这样它就可以从这些文件和 绝不然 - `AGENTS.md`:最常被打破的规则,以及看的地方. - `docs/`:每个图表类型的参考文献. - `examples/`: 要从工作代码开始 . 为了让经纪人使用它们 把这个加入你的项目 `AGENTS.md` 或者说 `CLAUDE.md`数字 : ```md ## amCharts 5 This project uses amCharts 5 (`@amcharts/amcharts5`). Its API is not the amCharts 4 API, and it may be newer than what you remember. Before writing chart code, read `node_modules/@amcharts/amcharts5/AGENTS.md` and follow it. ``` 用脚本文件指向 `AGENTS.md` 在图表文件夹中 换句话说. amCharts 还运行一个主机 [MCP 服务器](https://docs.amcharts.com/v5/ai/mcp/) 与文档、 API 参考、 290+ 工作示例和地图文件一起, at `https://mcp.amcharts.com/mcp`。不需要账户或密钥: - 克劳德:添加 [连接目录中的图 5](https://claude.ai/directory/amcharts)。 。 。 . - 克劳德代码 : `claude mcp add --transport http amcharts5 https://mcp.amcharts.com/mcp`。 。 。 . - 光标、 VS 代码、 Windsurf 和其他 MCP 客户端: 在上面添加 URL, 或运行 它与本地 `npx -y @amcharts/amcharts5-mcp`。 。 。 . 还有一个 [技能](https://github.com/amcharts/amcharts5-skill) 页:1 编码代理, 图表 5 已打开 [A. 背 景7](https://context7.com/amcharts/amcharts5), (中文(简体) ), 还有 [更多关于图和AI](https://docs.amcharts.com/v5/ai/)。 。 。 . ## 许可证 如果你有商业图5的许可证, 这个软件由你的 许可证,它取代了与此软件包捆绑的任何其他许可证. 没有商业执照的,使用此软件由下列情况管辖: 免费软件许可证。 参见包含的LICENSE文件. 执照也是 [在线](https://github.com/amcharts/amcharts5/blob/master/packages/shared/LICENSE)。 。 。 . 简言之:免费许可证允许在任何商业项目中使用 包括,只要图徽标留在图上和LICENSE文件上 留在文档中。 它不允许出售或分发图书馆 独自一人。 LICENSE文件有确切的条款 [商业许可证](https://www.amcharts.com/online-store/) 掩护它 没有. ## 支助 找到窃听器,还是有问题? 打开一个 [gitHub 上的问题](https://github.com/amcharts/amcharts5/issues): 图表 团队监视他们. 保证支持与amPlus订阅。 如果你有执照 或订阅,你可以 [直接联系我们](https://www.amcharts.com/support/support-info/priority-support/)。 。 。 . 如果你不这样做,这里是 [多几个选项](https://www.amcharts.com/support/support-info/free-support/)。 。 。 . 还有什么: [联系人@amcharts.com](mailto:contact@amcharts.com)。 。 。 . ## 再来 - [图表 5 更改日志](https://github.com/amcharts/amcharts5/blob/master/packages/shared/CHANGELOG.md), (中文(简体) ), 也在此包中作为 `CHANGELOG.md` - [文件更改日志](https://docs.amcharts.com/v5/changelog/) - [创建翻译](https://docs.amcharts.com/v5/concepts/locales/creating-translations/) - [GitHub 上的源代码](https://github.com/amcharts/amcharts5) ## 常见问题 ### @amcharts/amcharts5 是什么？ JavaScript 和 TypeScript 图表和地图: XY, 派, 地图, 股票, 甘特, 等级, 流, 雷达和时序图, 在画布上或作为 SVG ### 如何安装 @amcharts/amcharts5？ 在项目目录运行 npm install @amcharts/amcharts5，或使用 pnpm add / yarn add / bun add。 ### @amcharts/amcharts5 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @amcharts/amcharts5 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @amcharts/amcharts5 可以商用吗？ @amcharts/amcharts5 使用 SEE LICENSE IN LICENSE 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。 ### @amcharts/amcharts5 的下载量有多少？ 根据 npm 官方下载统计，@amcharts/amcharts5 在 2026/10/06 – 2026/11/04 这 30 天内被下载 1,444,513 次，日均约 48,150 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @amcharts/amcharts5 还在维护吗？ 最新版本 5\.21\.5 发布于 2026/10/26（11 天前）；至今共发布 267 个版本，其中过去 12 个月发布了 33 个；首次发布于 2021/08/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。