chart-gen

图表图片生成器

使用 Vega-Lite 从数据生成 PNG 图表图片，非常适合无界面的服务器环境。

为什么选择这个 Skill？

专为 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 "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

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 "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