메뉴
从JSON数据生成高质量PNG/SVG图表图片，支持折线图、柱状图、面积图、散点图、K线图、饼图/环形图、热力图、多系列图和堆叠图等多种类型。适用于快速可视化数据、生成报告图表、绘制趋势变化等场景。当用户请求“生成图表”、“画个趋势图”、“做个柱状图”、“可视化这些数据”，或提供具体数据并要求“做成图表图片”、“导出为PNG”时触发。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | chart-gen |
| version | 2.5.1 |
| description | 从JSON数据生成高质量PNG/SVG图表图片，支持折线图、柱状图、面积图、散点图、K线图、饼图/环形图、热力图、多系列图和堆叠图等多种类型。适用于快速可视化数据、生成报告图表、绘制趋势变化等场景。当用户请求“生成图表”、“画个趋势图”、“做个柱状图”、“可视化这些数据”，或提供具体数据并要求“做成图表图片”、“导出为PNG”时触发。 |
| provides | [{"capability":"chart-generation","methods":["lineChart","barChart","areaChart","pieChart","candlestickChart","heatmap"]}] |
使用 Vega-Lite 从数据生成 PNG 图表图片，非常适合无界面的服务器环境。
专为 Fly.io / VPS / Docker 部署而设计：
canvas 需要构建工具）cd /data/clawd/skills/chart-image/scripts && npm install
node /data/clawd/skills/chart-image/scripts/chart.mjs \
--type line \
--data '[{"x":"10:00","y":25},{"x":"10:30","y":27},{"x":"11:00","y":31}]' \
--title "Price Over Time" \
--output chart.png
node chart.mjs --type line --data '[{"x":"A","y":10},{"x":"B","y":15}]' --output line.png
node chart.mjs --type bar --data '[{"x":"A","y":10},{"x":"B","y":15}]' --output bar.png
node chart.mjs --type area --data '[{"x":"A","y":10},{"x":"B","y":15}]' --output area.png
# 饼图
node chart.mjs --type pie --data '[{"category":"A","value":30},{"category":"B","value":70}]' \
--category-field category --y-field value --output pie.png
# 环形图（中间有空洞）
node chart.mjs --type donut --data '[{"category":"A","value":30},{"category":"B","value":70}]' \
--category-field category --y-field value --output donut.png
node chart.mjs --type candlestick \
--data '[{"x":"Mon","open":100,"high":110,"low":95,"close":105}]' \
--open-field open --high-field high --low-field low --close-field close \
--title "Stock Price" --output candle.png
node chart.mjs --type heatmap \
--data '[{"x":"Mon","y":"Week1","value":5},{"x":"Tue","y":"Week1","value":8}]' \
--color-value-field value --color-scheme viridis \
--title "Activity Heatmap" --output heatmap.png
在同一张图表上对比多条趋势线：
node chart.mjs --type line --series-field "market" \
--data '[{"x":"Jan","y":10,"market":"A"},{"x":"Jan","y":15,"market":"B"}]' \
--title "Comparison" --output multi.png
node chart.mjs --type bar --stacked --color-field "category" \
--data '[{"x":"Mon","y":10,"category":"Work"},{"x":"Mon","y":5,"category":"Personal"}]' \
--title "Hours by Category" --output stacked.png
价格折线与成交量柱状图叠加显示：
node chart.mjs --type line --volume-field volume \
--data '[{"x":"10:00","y":100,"volume":5000},{"x":"11:00","y":105,"volume":3000}]' \
--title "Price + Volume" --output volume.png
node chart.mjs --sparkline --data '[{"x":"1","y":10},{"x":"2","y":15}]' --output spark.png
迷你图默认尺寸为 80x20，透明背景，无坐标轴。
| 选项 | 说明 | 默认值 |
|---|---|---|
--type | 图表类型：line, bar, area, point, pie, donut, candlestick, heatmap | line |
--data | JSON 数据数组 | - |
--output | 输出文件路径 | chart.png |
--title | 图表标题 | - |
--width | 宽度（像素） | 600 |
--height | 高度（像素） | 300 |
| 选项 | 说明 | 默认值 |
|---|---|---|
--x-field | X 轴字段名 | x |
--y-field | Y 轴字段名 | y |
--x-title | X 轴标签 | 字段名 |
--y-title | Y 轴标签 | 字段名 |
--x-type | X 轴类型：ordinal（分类）, temporal（时间）, quantitative（数值） | ordinal |
--y-domain | Y 轴范围，格式为 "最小值,最大值" | 自动 |
| 选项 | 说明 | 默认值 |
|---|---|---|
--color | 线条/柱状图颜色 | #e63946 |
--dark | 暗色主题 | false |
--svg | 输出 SVG 格式（而非 PNG） | false |
--color-scheme | Vega 配色方案（category10, viridis 等） | - |
| 选项 | 说明 | 默认值 |
|---|---|---|
--show-change | 在最后一个数据点显示涨跌百分比标注 | false |
--focus-change | 将 Y 轴缩放至数据范围的 2 倍，突出变化 | false |
--focus-recent N | 只显示最近 N 个数据点 | 全部 |
--show-values | 标注最大值/最小值 | false |
| 选项 | 说明 | 默认值 |
|---|---|---|
--series-field | 多系列折线图的分组字段 | - |
--stacked | 启用堆叠柱状图模式 | false |
--color-field | 堆叠/颜色分类字段 | - |
| 选项 | 说明 | 默认值 |
|---|---|---|
--open-field | OHLC 开盘价字段 | open |
--high-field | OHLC 最高价字段 | high |
--low-field | OHLC 最低价字段 | low |
--close-field | OHLC 收盘价字段 | close |
| 选项 | 说明 | 默认值 |
|---|---|---|
--category-field | 饼图扇区分类字段 | x |
--donut | 渲染为环形图（中间有空洞） | false |
| 选项 | 说明 | 默认值 |
|---|---|---|
--color-value-field | 热力图色彩强度字段 | value |
--y-category-field | Y 轴分类字段 | y |
| 选项 | 说明 | 默认值 |
|---|---|---|
--y2-field | 第二 Y 轴字段（独立的右侧坐标轴） | - |
--y2-title | 第二 Y 轴标题 | 字段名 |
--y2-color | 第二系列颜色 | #60a5fa（暗色）/ #2563eb（亮色） |
--y2-type | 第二坐标轴图表类型：line, bar, area | line |
示例： 收入柱状图（左轴）+ 流失率面积图（右轴）：
node chart.mjs \
--data '[{"month":"Jan","revenue":12000,"churn":4.2},...]' \
--x-field month --y-field revenue --type bar \
--y2-field churn --y2-type area --y2-color "#60a5fa" \
--y-title "Revenue ($)" --y2-title "Churn (%)" \
--x-sort none --dark --title "Revenue vs Churn"
| 选项 | 说明 | 默认值 |
|---|---|---|
--volume-field | 成交量柱状图字段（启用双 Y 轴） | - |
--volume-color | 成交量柱状图颜色 | #4a5568 |
| 选项 | 说明 | 默认值 |
|---|---|---|
--y-format | Y 轴格式：percent, dollar, compact, decimal4, integer, scientific，或 d3-format 字符串 | 自动 |
--subtitle | 图表副标题（显示在标题下方） | - |
--hline | 水平参考线：格式为 "值" 或 "值,颜色" 或 "值,颜色,标签"（可重复使用） | - |
| 选项 | 说明 | 默认值 |
|---|---|---|
--annotation | 静态文字标注 | - |
--annotations | JSON 格式的事件标记数组 | - |
node chart.mjs --type line --data '[...]' \
--title "Iran Strike Odds (48h)" \
--show-change --focus-change --show-values --dark \
--output alert.png
只查看最近的变化：
node chart.mjs --type line --data '[hourly data...]' \
--focus-recent 4 --show-change --focus-change --dark \
--output recent.png
在图表上标记事件：
node chart.mjs --type line --data '[...]' \
--annotations '[{"x":"14:00","label":"News broke"},{"x":"16:30","label":"Press conf"}]' \
--output annotated.png
用于需要正确处理日期间隔的时间序列：
node chart.mjs --type line --x-type temporal \
--data '[{"x":"2026-01-01","y":10},{"x":"2026-01-15","y":20}]' \
--output temporal.png
当 X 值为 ISO 日期格式且你希望间距反映实际时间间隔（而非等间距排列）时，使用 --x-type temporal。
格式化坐标轴数值以提高可读性：
# 美元金额
node chart.mjs --data '[...]' --y-format dollar --output revenue.png
# → $1,234.56
# 百分比（值为 0-1 的小数）
node chart.mjs --data '[...]' --y-format percent --output rates.png
# → 45.2%
# 大数字简写
node chart.mjs --data '[...]' --y-format compact --output users.png
# → 1.2K, 3.4M
# 加密货币价格（4 位小数）
node chart.mjs --data '[...]' --y-format decimal4 --output molt.png
# → 0.0004
# 自定义 d3-format 字符串
node chart.mjs --data '[...]' --y-format ',.3f' --output custom.png
可用的快捷格式：percent, dollar/usd, compact, integer, decimal2, decimal4, scientific
在标题下方添加补充说明：
node chart.mjs --title "MOLT Price" --subtitle "20,668 MOLT held" --data '[...]' --output molt.png
使用 --dark 开启暗色模式。建议根据时间自动选择：
--darkecho '[{"x":"A","y":1},{"x":"B","y":2}]' | node chart.mjs --output out.png
用于高级图表定制：
node chart.mjs --spec my-spec.json --output custom.png
生成图表后，务必将图片发送回用户的频道。 不要只是保存到文件然后描述它——图表的意义在于可视化呈现。
# 1. 生成图表
node chart.mjs --type line --data '...' --output /data/clawd/tmp/my-chart.png
# 2. 发送图片！使用 message 工具的 filePath 参数：
# action=send, target=<channel_id>, filePath=/data/clawd/tmp/my-chart.png
小贴士：
/data/clawd/tmp/（持久化存储）而非 /tmp/（可能被清理）action=send 配合 filePath——thread-reply 不支持文件附件--dark更新于：2026-02-04 - 新增 --y-format（percent/dollar/compact/decimal4）和 --subtitle 选项
生成横向翻页网页 PPT（单 HTML 文件），含 WebGL 背景、章节幕封、数据大字报、图片网格等模板。提供两种风格：① "电子杂志 × 电子墨水"（衬线 + 流体背景 + 暖色） ② "瑞士国际主义"（无衬线 + 网格点阵 + IKB/柠檬黄/柠檬绿/安全橙高亮）。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT，或提到"杂志风 PPT"、"瑞士风 PPT"、"Swiss Style"、"horizontal swipe deck"时使用。
Utilizes a suite of tools to facilitate exhaustive, evidence-based deep research and long-form report engineering. Enforces a minimum 10-iteration search cycle, recursive reflection, and the production of structured reports exceeding 10,000 words with mandatory IPython visualizations and specific paragraph logic.
Professional PDF solution. Create PDFs using HTML+Paged.js (academic papers, reports, documents). Process existing PDFs using Python (read, extract, merge, split, fill forms). Supports KaTeX math formulas, Mermaid diagrams, three-line tables, citations, and other academic elements. Also use this skill when user explicitly requests LaTeX (.tex) or native LaTeX compilation.
广告创意写作与优化技能，覆盖标题、描述、正文及完整广告方案的生成与迭代，适用于Google Ads、Meta、LinkedIn、TikTok、Twitter/X等主流付费广告平台。当用户需要撰写广告文案、进行创意生成、标题撰写，或请求批量生产广告变体、基于数据进行创意测试与效果优化时触发。
ADHD 生活管理助手，通过每日规划、任务拆解、时间感知辅助、优先级排序、虚拟陪伴工作和情绪支持来帮助管理日常。当用户寻求帮助规划日程、克服任务瘫痪、应对拖延，或提到时间盲、难以启动任务、注意力分散等 ADHD 相关挑战时触发此技能。
从 Flask、FastAPI、Express 或 Gin 等 Web 框架的源代码中自动扫描路由定义，生成符合 OpenAPI 3.0 / Swagger 规范的标准化 API 文档文件。当用户需要生成 API 文档、提到 OpenAPI、Swagger、接口文档、路由扫描或从代码自动提取接口信息时触发。