图表图像生成器

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

为何选择此技能？

专为 Fly.io / VPS / Docker 部署而构建：

• ✅无需原生编译- 使用带有预构建二进制文件的 Sharp（不像canvas那样需要构建工具）
• ✅无需 Puppeteer/浏览器- 纯 Node.js 实现，无需下载 Chrome，无无头浏览器开销
• ✅轻量级- 总依赖约 15MB，而基于 Puppeteer 的解决方案超过 400MB
• ✅快速冷启动- 无浏览器启动延迟，生成图表时间 <500 毫秒
• ✅支持离线工作- 无需调用外部 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

饼图 / 环形图

# Pie
node chart.mjs --type pie --data '[{"category":"A","value":30},{"category":"B","value":70}]' \
  --category-field category --y-field value --output pie.png

# Donut (with hole)
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

堆叠条形图

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

成交量叠加图（双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 "Price + Volume" --output volume.png

迷你趋势图（迷你内联图表）

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

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

选项参考

基本选项

选项	描述	默认值
--type	图表类型：折线图、条形图、面积图、点图、饼图、环形图、K线图、热力图	折线图
--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轴类型：序数型、时间型、数值型	序数型
--x-format	时间型X轴标签格式（d3-time-format，例如%b %d、%H:%M）	自动
--x-sort	X轴排序：升序、降序或无（保持输入顺序）	自动
--x-label-limit PX	X轴标签在Vega截断前的最大像素宽度	自动
--y-label-limit PX	Y轴标签在Vega截断前的最大像素宽度	自动
--y-domain	Y轴刻度范围，格式为"最小值,最大值"	自动
--y-pad	添加垂直内边距，作为范围的一部分（例如，0.1= 10%）	0

视觉选项

选项	描述	默认值
--color	线条/条形颜色	#e63946
--dark	深色模式主题	false
--svg	输出SVG格式而非PNG格式	false
--no-points	在线形图中隐藏点标记	false
--line-width N	为线形图设置线条粗细（单位：像素）	2
--point-size N	设置线图/点图的标记点大小	60
--bar-radius N	为柱状图设置圆角半径（像素）	0
--color-scheme	Vega配色方案（category10、viridis等）	-

警报/监控选项

选项	描述	默认值
--show-change	在最后数据点显示+/-%变化标注	false
--focus-change	将Y轴缩放至数据范围的2倍	false
--focus-recent N	仅显示最近N个数据点	all
--show-values	标注最小/最大峰值点	false
--last-value	标记最终数据点值	false

多系列/堆叠选项

选项	描述	默认值
--series-field	多系列折线图字段	-
--stacked	启用堆叠柱状图模式	false
--color-field	堆叠/颜色分类字段	-

K线图选项

选项	描述	默认值
--open-field	OHLC开盘价字段	open
--high-field	OHLC最高价字段	high
--low-field	OHLC 最低价字段	最低价
--close-field	OHLC 收盘价字段	收盘价

饼图/环图选项

选项	描述	默认值
--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	第二个轴的图表类型：折线图、条形图、面积图	折线图
--y2-format	右侧轴格式：百分比、美元、紧凑型、整数、四位小数，或d3格式字符串	自动

示例：收入条形图（左侧） + 客户流失面积图（右侧）：

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" --y2-format ".1f" \
  --y-title "Revenue ($)" --y2-title "Churn (%)" \
  --x-sort none --dark --title "Revenue vs Churn"

成交量叠加选项（蜡烛图）

选项	描述	默认
--volume-field	成交量柱状图字段（启用双轴）	-
--volume-color	成交量柱状图颜色	#4a5568

格式化选项

选项	描述	默认值
--y-format	Y轴格式：百分比、美元、紧凑型、四位小数、整数、科学计数法，或d3格式字符串	自动
--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

时间型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-type temporal当X值为ISO日期格式，且您希望间距反映实际时间间隔（而非等间距）时。

Y轴格式设置

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

# Dollar amounts
node chart.mjs --data '[...]' --y-format dollar --output revenue.png
# → $1,234.56

# Percentages (values as decimals 0-1)
node chart.mjs --data '[...]' --y-format percent --output rates.png
# → 45.2%

# Compact large numbers
node chart.mjs --data '[...]' --y-format compact --output users.png
# → 1.2K, 3.4M

# Crypto prices (4 decimal places)
node chart.mjs --data '[...]' --y-format decimal4 --output molt.png
# → 0.0004

# Custom d3-format string
node chart.mjs --data '[...]' --y-format ',.3f' --output custom.png

可用快捷方式：percent,dollar/usd,紧凑,整数,两位小数,四位小数,科学计数法

图表副标题

在标题下方添加说明：

node chart.mjs --title "MOLT Price" --subtitle "20,668 MOLT held" --data '[...]' --output molt.png

主题选择

使用--dark启用深色模式。基于时间自动选择：

• 夜间（当地时间20:00-07:00）：--dark
• 日间（当地时间07:00-20:00）：浅色模式（默认）

社交媒体尺寸预设

当图表用于特定平台时，使用--output-size参数：

# Bluesky / OG-style landscape post
node chart.mjs --type line --data '[...]' --output-size bluesky --output bluesky-chart.png

# Instagram / Threads portrait post
node chart.mjs --type line --data '[...]' --output-size portrait --output portrait-chart.png

可用预设包括推特discordslacklinkedinbluesky(bsky别名),youtubeinstagram竖版故事缩略图宽屏和方形。数据管道自定义 Vega-Lite 规范适用于高级图表：thumbnail,wide, andsquare.

Piping Data

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

Custom Vega-Lite Spec

For advanced charts:

node chart.mjs --spec my-spec.json --output custom.png

⚠️ 重要：务必发送图片！

生成图表后，始终将其发送回用户频道。 不要仅仅保存到文件然后描述它——关键在于视觉效果。

# 1. Generate the chart
node chart.mjs --type line --data '...' --output /data/clawd/tmp/my-chart.png

# 2. Send it! Use message tool with filePath:
#    action=send, target=<channel_id>, filePath=/data/clawd/tmp/my-chart.png

提示：

• 保存到/data/clawd/tmp/（持久性目录），而非/tmp/（可能被清理）
• 使用action=send配合filePath参数注意：thread-reply
• 不支持文件附件
• 在消息文本中包含简要说明自动使用--dark

---

模式（以色列时间 20:00-07:00 期间）更新于：2026-03-20 - 已添加因此，双轴和成交量叠加图表可以独立格式化右轴（百分比、美元、紧凑型、自定义 d3 格式）；版本已升级至 2.6.17。

部分文章来自各大搜索引擎，如有侵权，请与我联系删除。