Install
openclaw skills install @wwbwin/chart-craftopenclaw skills install @wwbwin/chart-craft日常工作中经常需要快速展示一组数据——柱状图看对比、饼图看占比、折线图看趋势。但打开 Excel 或 PPT 来画图表太重量级,专业工具(ECharts、D3)又有学习门槛。很多时候只需要一张能嵌入文档或邮件的轻量图表,还能悬停看数值、切换图例。
本 Skill 通过自然语言描述数据 → 智能推荐图表类型 → 纯前端渲染的方式,零依赖地生成柱状图、折线图、饼图、环形图、面积图、堆叠柱状图、雷达图、组合图等交互式 SVG 图表。适合嵌入文档、邮件、汇报材料中。
将简单的数据描述转化为柱状图、饼图、折线图等交互式图表 HTML。
作者:wuwenbin-beijing-st
运行此 Skill 后,按以下步骤操作:
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
--bg: #ffffff
--text: #1f2937
--grid: #e5e7eb
--axis: #9ca3af
--tooltip-bg: #1f2937
--tooltip-text: #ffffff
--bg: #0f172a
--text: #e2e8f0
--grid: #334155
--axis: #64748b
--tooltip-bg: #e2e8f0
--tooltip-text: #0f172a
--bg: #fefcf6
--text: #3a3a3a
--grid: #e5e5e5
--axis: #737373
--tooltip-bg: #3a3a3a
--tooltip-text: #fefcf6
--bg: #ffffff
--text: #1e293b
--grid: #f1f5f9
--axis: #94a3b8
--tooltip-bg: #1e293b
--tooltip-text: #ffffff
/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