【简介】

日常工作中经常需要快速展示一组数据——柱状图看对比、饼图看占比、折线图看趋势。但打开 Excel 或 PPT 来画图表太重量级，专业工具（ECharts、D3）又有学习门槛。很多时候只需要一张能嵌入文档或邮件的轻量图表，还能悬停看数值、切换图例。

本 Skill 通过自然语言描述数据 → 智能推荐图表类型 → 纯前端渲染的方式，零依赖地生成柱状图、折线图、饼图、环形图、面积图、堆叠柱状图、雷达图、组合图等交互式 SVG 图表。适合嵌入文档、邮件、汇报材料中。

Chart Craft — 简易图表生成 Skill

将简单的数据描述转化为柱状图、饼图、折线图等交互式图表 HTML。

作者：wuwenbin-beijing-st

使用说明

运行此 Skill 后，按以下步骤操作：

描述数据：用自然语言描述数据，或粘贴表格格式数据
选择图表类型：接受 AI 推荐或手动选择
选择配色方案：选择喜欢的配色主题
生成图表：输出交互式单文件 HTML

数据输入格式

2023年各季度营收（万元）：
Q1: 120, Q2: 180, Q3: 165, Q4: 210

或表格格式：
季度,营收
Q1,120
Q2,180
Q3,165
Q4,210

场景-模式映射表

| 数据特征 | 推荐图表 | 适用场景 | |---------|---------|---------| | 分类对比（≤10 类） | bar-chart（柱状图） | 各产品销量、各团队业绩 | | 时间序列趋势 | line-chart（折线图） | 月度营收、网站访问量变化 | | 占比构成 | pie-chart（饼图） | 市场份额、预算分配比例 | | 占比构成（需留白） | donut-chart（环形图） | 类似饼图，更现代简洁 | | 累积趋势 | area-chart（面积图） | 用户增长、累计销售额 | | 总量 + 分量 | stacked-bar（堆叠柱状图） | 各产品各季度营收构成 | | 多维度对比 | radar-chart（雷达图） | 能力评估、产品维度对比 | | 多数据多类型 | combo-chart（组合图） | 营收（柱）+ 增长率（折线） |

配色方案库

分类配色

#4e79a7 #f28e2b #e15759 #76b7b2 #59a14f #edc948 #b07aa1 #ff9da7
#9c755f #bab0ac #e15759 #f28e2b #4e79a7 #76b7b2 #59a14f #edc948

渐变配色

蓝色渐变: #e0f2fe → #0284c7
绿色渐变: #dcfce7 → #16a34a
橙色渐变: #ffedd5 → #ea580c
紫色渐变: #e9d5ff → #7c3aed

单色配色（同一色相不同明度）

蓝单色: #dbeafe, #93c5fd, #60a5fa, #3b82f6, #2563eb, #1d4ed8
绿单色: #d1fae5, #6ee7b7, #34d399, #10b981, #059669, #047857

4 套主题配色

1. 商业蓝

--bg: #ffffff
--text: #1f2937
--grid: #e5e7eb
--axis: #9ca3af
--tooltip-bg: #1f2937
--tooltip-text: #ffffff

2. 暗色科技

--bg: #0f172a
--text: #e2e8f0
--grid: #334155
--axis: #64748b
--tooltip-bg: #e2e8f0
--tooltip-text: #0f172a

3. 纸质报告

--bg: #fefcf6
--text: #3a3a3a
--grid: #e5e5e5
--axis: #737373
--tooltip-bg: #3a3a3a
--tooltip-text: #fefcf6

4. 多彩活泼

--bg: #ffffff
--text: #1e293b
--grid: #f1f5f9
--axis: #94a3b8
--tooltip-bg: #1e293b
--tooltip-text: #ffffff

交互增强包列表

基础交互

悬停提示（显示精确数值）
数据标签（显示/隐藏）
图例切换（点击隐藏/显示数据系列）

高级交互

动画入场（数据加载动画）
导出为 PNG 图片（Canvas API 截图）
数据缩放（折线图/面积图区域缩放）
阈值线（添加目标值参考线）

限制说明

单文件 HTML：所有输出均为单一 HTML 文件，CSS 和 JS 全部内联
零外部依赖：不加载任何 CDN 资源、字体、图标库
图表渲染：纯 SVG + CSS 绘制，或 Canvas API
系统字体栈：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", sans-serif
浏览器兼容：Chrome/Firefox/Safari/Edge 最新两版
响应式布局：自动适配容器宽度

命令定义

`/chart-craft`

主入口命令。输入数据描述，选择或接受推荐的图表类型后生成交互式图表 HTML。

`/chart-compare`

生成多数据集对比图表。支持在同一图表中叠加多组数据系列。

文件结构

skills/chart-craft/
├── SKILL.md
├── patterns/
│   ├── bar-chart.json       # 柱状图
│   ├── line-chart.json      # 折线图
│   ├── pie-chart.json       # 饼图
│   ├── donut-chart.json     # 环形图
│   ├── area-chart.json      # 面积图
│   ├── stacked-bar.json     # 堆叠柱状图
│   ├── radar-chart.json     # 雷达图
│   └── combo-chart.json     # 组合图
└── templates/
    ├── base.html
    ├── bar-chart.html
    ├── line-chart.html
    ├── pie-chart.html
    ├── donut-chart.html
    ├── area-chart.html
    ├── stacked-bar.html
    ├── radar-chart.html
    └── combo-chart.html