一句话生成amCharts 5图表代码！官方Skill让AI直接画出你想要的图

「给我画一个去年四季度的收入趋势图，要带动画效果的那种。」

以前这种需求，要么自己翻文档调 API，要么截图丢给设计师。

现在？你只需要装一个 Skill，然后直接跟 AI 说就行了。

这个 Skill 是什么

amcharts5-skill，来自知名图表库 amCharts 官方的 Claude AI Skill。

GitHub：https://github.com/amcharts/amcharts5-skill

支持构建的图表类型非常全：
– XY 系列：折线图、柱状图、面积图、散点图
– 饼图/环形图：带动画和图例
– 地图：世界地图、分省地图、热力图（Choropleth）
– 层级图：树图（Treemap）、旭日图（Sunburst）
– 流向图：桑基图（Sankey）、弦图（Chord）
– 雷达图、股票图、甘特图、词云、韦恩图、时间轴

一句话：你想要的图表形态，它基本都能搞。

怎么装

Claude Code：

git clone https://github.com/amcharts/amcharts5-skill .claude/skills/amcharts5-skill

Claude.ai 网页版：
1. 下载 ZIP
2. Claude.ai → Settings → Skills → Upload skill → 开启

Cursor / Windsurf 等编辑器：把 SKILL.md 内容直接粘贴进对话，或者加到 .cursorrules 里让 AI 自己读。

装好之后，直接说人话要图表：
– 「帮我做一个展示各国 GDP 的世界地图热力图」
– 「把这份 CSV 数据变成折线图，加上季度对比」
– 「给这个饼图加上动画过渡效果」

Skill 会自动加载对应图表类型的参考文档，不用你翻 amCharts 的 API 文档。

实际体验

我自己试了一道：「用 amCharts 5 做一个显示月度活跃用户趋势的面积图，带渐变填充和动画」。

结果 Claude 直接生成了完整的 TypeScript 代码，包含渐变色配置、动画参数、响应式设置，可以直接贴进项目跑。

关键是：以前让 AI 写图表代码，它经常搞错 amCharts 5 的 API（v4 和 v5 差别挺大），装了 Skill 之后这类错误基本消失了——Skill 里的参考文档是针对 v5 版本的。

适用场景

• 数据看板开发：快速出原型，不用记 API
• SaaS 产品集成：让 AI 帮你写图表功能代码
• 报告自动化：根据数据描述自动生成可视化
• 前端工程师：省去翻文档的时间，直接出码

小结

amcharts5-skill 把 amCharts 5 的文档变成了 AI 的内置知识，说一句话生成一张图表代码——不是截图，是真实可用的 TypeScript/JavaScript。

对于天天跟图表打交道的前端和全栈开发者，这个 Skill 属于那种「装了就不想删」的类型。

GitHub：https://github.com/amcharts/amcharts5-skill

GitHub: https://github.com/amcharts/amcharts5-skill