名称： chart-image
版本： 2.5.1
描述： 从数据生成出版物质量的图表图像。支持折线图、柱状图、面积图、散点图、K线图、饼图/环形图、热力图、多系列图和堆叠图。适用于数据可视化、创建图表、绘制时间序列或为报告/告警生成图表图像。专为 Fly.io/VPS 部署设计——无需原生编译、无需 Puppeteer、无需浏览器。纯 Node.js，使用预构建的二进制文件。
provides:
- capability: chart-generation
methods: [lineChart, barChart, areaChart, pieChart, candlestickChart, heatmap]

图表图像生成器

使用 Vega-Lite 从数据生成 PNG 图表图像。非常适合无头服务器环境。

为什么选择此技能？

专为 Fly.io / VPS / Docker 部署打造：
- ✅ 无需原生编译 - 使用带有预构建二进制文件的 Sharp（与需要构建工具的 canvas 不同）
- ✅ 无需 Puppeteer/浏览器 - 纯 Node.js，无需下载 Chrome，无头浏览器开销
- ✅ 轻量级 - 总依赖约 15MB，而基于 Puppeteer 的解决方案超过 400MB
- ✅ 快速冷启动 - 无浏览器启动延迟，图表生成时间 <500ms
- ✅ 离线工作 - 无需外部 API 调用（与 QuickChart.io 不同）

设置（一次性）

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 "价格随时间变化" \
  --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

K线图（OHLC）

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 "股票价格" --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 "活动热力图" --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 "对比" --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 "按类别划分的小时数" --output stacked.png

成交量叠加图（双 Y 轴）

价格折线叠加成交量柱状图：

node chart.mjs --type line --volume-field volume \
  --data '[{"x":"10:00","y":100,"volume":5000},{"x":"11:00","y":105,"volume":3000}]' \
  --title "价格 + 成交量" --output volume.png

迷你图（小型内联图表）

node chart.mjs --sparkline --data '[{"x":"1","y":10},{"x":"2","y":15}]' --output spark.png

迷你图默认为 80x20 像素，透明背景，无坐标轴。

选项参考

基础选项

坐标轴选项

视觉选项

告警/监控选项

多系列/堆叠选项

K线图选项

饼图/环形图选项

热力图选项

双轴选项（通用）

示例： 收入柱状图（左）+ 流失率面积图（右）：

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 "收入 ($)" --y2-title "流失率 (%)" \
  --x-sort none --dark --title "收入 vs 流失率"

成交量叠加选项（K线图）

格式化选项

注释选项

告警风格图表（推荐用于监控）

node chart.mjs --type line --data '[...]' \
  --title "伊朗打击概率（48小时）" \
  --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":"新闻爆发"},{"x":"16:30","label":"新闻发布会"}]' \
  --output annotated.png

时间型 X 轴

用于处理日期间隔的正确时间序列：

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。

Y 轴格式化

格式化坐标轴值以提高可读性：

# 美元金额
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 价格" --subtitle "持有 20,668 MOLT" --data '[...]' --output molt.png

主题选择

使用 --dark 启用深色模式。根据时间自动选择：
- 夜间（当地时间 20:00-07:00）：--dark
- 日间（当地时间 07:00-20:00）：浅色模式（默认）

管道传输数据

echo '[{"x":"A","y":1},{"x":"B","y":2}]' | node chart.mjs --output out.png

自定义 Vega-Lite 规范

用于高级图表：

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 不支持文件附件
- 在消息文本中包含简要说明
- 在以色列时间 20:00-07:00 之间自动使用 --dark

更新日期：2026-02-04 - 新增 --y-format (percent/dollar/compact/decimal4) 和 --subtitle