图表5
网络的 JavaScript 和 TypeScript 图表和地图:行、列、 区域和 烛台图、馅饼和漏斗、地理图、股票图、甘特 图表、树图和其他等级图、Sankey和和弦图、雷达和 仪表,时间表,字云和文能图.
每个图片都链接到其示例代码.
安装
Npm, 对于使用捆绑器的项目:
npm install @amcharts/amcharts5
类型定义随之而来,需要TypeScript 5.0或更晚.
带有脚本标记,来自 CDN 或来自文件 zip 下载数字 :
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
地图需要地图文件(geodata),它们是一个单独的软件包: 无, (中文(简体) ), GitHub 图像, (中文(简体) ), 拉链。 。 。 .
第一个图表
页面需要一个高度的元素 :
<div id="chartdiv" style="width: 100%; height: 500px;"></div>
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 | useAmChart(setup, deps) | <AmChart config={config} /> |
| 阴道 | @amcharts/amcharts5-vue | useAmChart(templateRef, setup) | <AmChart :config="config" /> |
| 角质 | @amcharts/amcharts5-angular | <div [amChart]="setup"> | <am5-chart [config]="config"> |
| 丝绒 | @amcharts/amcharts5-svelte | <div {@attach attachAmChart(setup)}> | <am5-chart {@attach attachAmChartConfig({ config })}> |
对于反应土著, @amcharts/amcharts5-react-native
从 JSON 配置中绘制网络视频中的图表(<AmChart config={config} />(中文(简体) )
或从图表代码中指定为字符串(<AmChart code={code} data={data} />) (中文(简体) ).
每个软件包的README都有完整的示例. 没有软件包,请创建图表
当组件被挂起并调用时 root.dispose() 当它被清除时;
有指南用于:
反应, (中文(简体) ),
角质, (中文(简体) ),
阴道, (中文(简体) ),
下一个.js
财务报告和审定财务报表 其他人员。 。 。 .
图表类型
| 图表 | 模块 | 脚本文件 |
|---|---|---|
| 第十六届:行,行,行,行,行,散,烛台 | @amcharts/amcharts5/xy | xy.js |
| 馅饼和切片:派,甜甜圈,漏斗,金字塔 | @amcharts/amcharts5/percent | percent.js |
| 地图 | @amcharts/amcharts5/map | map.js |
| 库存 | @amcharts/amcharts5/stock | stock.js |
| 甘特语 | @amcharts/amcharts5/gantt | gantt.js |
| 等级:树图,出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出入出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出来 | @amcharts/amcharts5/hierarchy | hierarchy.js |
| 流动: 三键,和弦,弧图 | @amcharts/amcharts5/flow | flow.js |
| 雷达和测量仪 | @amcharts/amcharts5/radar | radar.js |
| 时间线:蛇形、螺旋、曲线 | @amcharts/amcharts5/timeline | timeline.js |
| 词云 | @amcharts/amcharts5/wc | wc.js |
| 维恩 | @amcharts/amcharts5/venn | venn.js |
库存、甘特、雷达和时间表图基于XY图:有脚本
标记,装入 xy.js 在他们面前。 甘特还需要 plugins/colorPicker.js。 。 。 .
图书馆里还有:
- 地图:地球和平面地图、昼夜卫星图像、像素地图, 并绘制世界、大陆、国家及其区域的地图.
- 股票图表:超过30个指标,绘图工具,比较股票和时期 选择者.
- 导出(原始内容存档于2018-09-21) (英语). PNG, JPG,, SVG,PDF,CSV,XLSX,JSON和HTML,以及打印.
- 30个主题其中 黑暗的,色盲的和反应迅速的.
- 无障碍数字 : 键盘导航和屏幕阅读器支持.
实例
大约80个例子与库一起出现,每个小图.
- 在拉链下载中, 打开
examples/index.html: 每一幅画廊 示例高于其来源. - 在 npm 包中,它们是来源 :
examples/<name>/index.ts索引examples/README.md财务报告和审定财务报表examples/examples.json。 。 。 . - 更多,更大的, 正在进入 演示 在网站上.
JSON和SVG的图表
图表可以描述为 a JSON 配置
搭建时 JsonParser,则运行图可以保存为一体。 多数
例子与他们的配置.
这个 <am5-chart> 元素从配置中构建一个没有图表代码的图表
全部,适合仅使用 HTML 的平面页面、框架和工具:
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/plugins/json.js"></script>
<script src="https://cdn.amcharts.com/lib/5/element.js"></script>
<script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<am5-chart themes="Animated" style="height: 400px" src="chart.json"></am5-chart>
配置来自 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数字 :
## 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 服务器
与文档、 API 参考、 290+ 工作示例和地图文件一起, at
https://mcp.amcharts.com/mcp。不需要账户或密钥:
- 克劳德:添加 连接目录中的图 5。 。 。 .
- 克劳德代码 :
claude mcp add --transport http amcharts5 https://mcp.amcharts.com/mcp。 。 。 . - 光标、 VS 代码、 Windsurf 和其他 MCP 客户端: 在上面添加 URL, 或运行
它与本地
npx -y @amcharts/amcharts5-mcp。 。 。 .
还有一个 技能 页:1 编码代理, 图表 5 已打开 A. 背 景7, (中文(简体) ), 还有 更多关于图和AI。 。 。 .
许可证
如果你有商业图5的许可证, 这个软件由你的 许可证,它取代了与此软件包捆绑的任何其他许可证.
没有商业执照的,使用此软件由下列情况管辖: 免费软件许可证。 参见包含的LICENSE文件. 执照也是 在线。 。 。 .
简言之:免费许可证允许在任何商业项目中使用 包括,只要图徽标留在图上和LICENSE文件上 留在文档中。 它不允许出售或分发图书馆 独自一人。 LICENSE文件有确切的条款 商业许可证 掩护它 没有.
支助
找到窃听器,还是有问题? 打开一个 gitHub 上的问题: 图表 团队监视他们.
保证支持与amPlus订阅。 如果你有执照 或订阅,你可以 直接联系我们。 。 。 . 如果你不这样做,这里是 多几个选项。 。 。 .
还有什么: 联系人@amcharts.com。 。 。 .
再来
- 图表 5 更改日志, (中文(简体) ),
也在此包中作为
CHANGELOG.md - 文件更改日志
- 创建翻译
- GitHub 上的源代码