chore: import zh skill chart-image

2026-07-13 21:37:14 +08:00
commit 91ef813152
7 changed files with 2307 additions and 0 deletions
@@ -0,0 +1,99 @@
+---
+name: chart-generation
+description: 图表生成能力
+---
+
+# chart-generation 能力
+
+提供方：chart-generation
+技能：chart-image
+
+## 方法
+
+### lineChart（折线图）
+
+**输入：**
+- data：数据点数组（包含 x/y、time/value 或 time/price 字段的对象）
+- title：（可选）图表标题
+- groupBy：（可选）用于多系列图表的分组字段
+- options：（可选）附加选项
+  - dark：boolean - 使用深色主题
+  - focusRecent：number - 缩放到最近 N 个数据点
+  - showChange：boolean - 显示百分比变化标注
+  - showValues：boolean - 在数据点上显示值标签
+
+**实现方式：**
+```bash
+# 将数据写入临时文件
+echo '${JSON.stringify(data)}' > /tmp/chart-data.json
+
+# 生成图表
+node /data/clawd/skills/chart-image/scripts/chart.mjs \
+  --type line \
+  --data "$(cat /tmp/chart-data.json)" \
+  --title "${title}" \
+  ${options.dark ? '--dark' : ''} \
+  ${options.focusRecent ? '--focus-recent ' + options.focusRecent : ''} \
+  ${options.showChange ? '--show-change' : ''} \
+  ${options.showValues ? '--show-values' : ''} \
+  --output /tmp/chart-${Date.now()}.png
+```
+
+**输出：**`{ path: string }` - 生成的 PNG 文件路径
+
+---
+
+### barChart（柱状图）
+
+**输入：**
+- data：包含 label 和 value 字段的对象数组
+- title：（可选）图表标题
+- options：（可选）附加选项
+  - dark：boolean - 使用深色主题
+  - showValues：boolean - 在柱子上显示值标签
+
+**实现方式：**
+```bash
+# 将数据写入临时文件
+echo '${JSON.stringify(data)}' > /tmp/chart-data.json
+
+# 生成图表
+node /data/clawd/skills/chart-image/scripts/chart.mjs \
+  --type bar \
+  --data "$(cat /tmp/chart-data.json)" \
+  --title "${title}" \
+  ${options.dark ? '--dark' : ''} \
+  ${options.showValues ? '--show-values' : ''} \
+  --output /tmp/chart-${Date.now()}.png
+```
+
+**输出：**`{ path: string }` - 生成的 PNG 文件路径
+
+---
+
+### areaChart（面积图）
+
+**输入：**
+- data：数据点数组
+- title：（可选）图表标题
+- options：（可选）与 lineChart 相同
+
+**实现方式：**
+```bash
+node /data/clawd/skills/chart-image/scripts/chart.mjs \
+  --type area \
+  --data '${JSON.stringify(data)}' \
+  --title "${title}" \
+  --output /tmp/chart-${Date.now()}.png
+```
+
+**输出：**`{ path: string }` - 生成的 PNG 文件路径
+
+---
+
+## 说明
+
+- 所有方法默认将 PNG 图片输出到 /tmp 目录
+- 在本地时间 20:00–07:00 之间使用 `--dark` 标志可获得更好的夜间模式视觉效果
+- 对于时间序列，数据点应包含 ISO 格式或可读字符串形式的 `time` 或 `x` 字段
+- 该技能底层使用 Vega-Lite — 完整选项请参见 SKILL.md
@@ -0,0 +1,315 @@
+# 📊 chart-image
+
+**出版级图表图像，直接由数据生成。无需浏览器、无需 Puppeteer、无需原生编译。**
+
+直接从 JSON 数据生成精美的 PNG 图表——非常适合机器人、仪表盘、告警和自动化报告。可在任何运行 Node.js 的环境中使用。
+
+![折线图示例](readme-assets/framed-line.png)
+
+## 为什么选择 chart-image？
+
+大多数图表库需要浏览器（Puppeteer、Playwright）或原生依赖（`canvas`、`cairo`）。这意味着 400MB+ 的安装体积、令人头疼的 Docker 构建和缓慢的冷启动。
+
+**chart-image 使用 Vega-Lite + Sharp 及预编译二进制文件：**
+
+| | chart-image | Puppeteer + Chart.js | QuickChart.io |
+|---|---|---|---|
+| **安装体积** | ~15MB | ~400MB+ | 0（API） |
+| **原生依赖** | 无 | Chromium | 不适用 |
+| **冷启动** | <500ms | 2-5s | 网络延迟 |
+| **离线** | ✅ | ✅ | ❌ |
+| **Fly.io/Docker** | 开箱即用 | 痛苦 | 取决于可用性 |
+
+## 安装
+
+### 通过 ClawHub（推荐）
+```bash
+clawhub install chart-image
+```
+
+### 手动安装
+```bash
+git clone https://github.com/Cluka-399/chart-image.git skills/chart-image
+cd skills/chart-image/scripts && npm install
+```
+
+## 快速上手
+
+```bash
+node scripts/chart.mjs \
+  --type line \
+  --data '[{"x":"Mon","y":10},{"x":"Tue","y":25},{"x":"Wed","y":18}]' \
+  --title "Weekly Trend" \
+  --dark \
+  --output chart.png
+```
+
+就这样。一条命令，一张 PNG。
+
+---
+
+## 图表类型
+
+### 📈 折线图
+
+追踪随时间变化的趋势。默认图表类型。
+
+```bash
+node scripts/chart.mjs --type line \
+  --data '[{"x":"Mon","y":142},{"x":"Tue","y":148},{"x":"Wed","y":145},{"x":"Thu","y":155},{"x":"Fri","y":162}]' \
+  --title "AAPL Weekly Price" --y-title "Price (USD)" \
+  --dark --show-values --output chart.png
+```
+
+![折线图](readme-assets/framed-line.png)
+
+### 📊 柱状图
+
+并列比较不同类别。
+
+```bash
+node scripts/chart.mjs --type bar \
+  --data '[{"x":"React","y":45},{"x":"Vue","y":28},{"x":"Svelte","y":15},{"x":"Angular","y":12}]' \
+  --title "Framework Usage %" --output chart.png
+```
+
+![柱状图](readme-assets/framed-bar.png)
+
+### 🌊 面积图
+
+与折线图类似，但通过填充区域来强调数据量。
+
+```bash
+node scripts/chart.mjs --type area \
+  --data '[{"x":"Jan","y":100},{"x":"Feb","y":250},{"x":"Mar","y":180},{"x":"Apr","y":420},{"x":"May","y":380},{"x":"Jun","y":520}]' \
+  --title "Monthly Signups" --dark --output chart.png
+```
+
+![面积图](readme-assets/framed-area.png)
+
+### 🍩 环形图 / 饼图
+
+一目了然展示占比。使用 `--type pie` 显示实心圆，或 `--type donut` 显示环形样式。
+
+```bash
+node scripts/chart.mjs --type donut \
+  --data '[{"x":"Desktop","y":58},{"x":"Mobile","y":35},{"x":"Tablet","y":7}]' \
+  --title "Traffic by Device" --dark --output chart.png
+```
+
+![环形图](readme-assets/framed-donut.png)
+
+### 📉 多系列折线图
+
+使用 `--series-field` 在一张图表上比较多条趋势。
+
+```bash
+node scripts/chart.mjs --type line \
+  --data '[{"x":"Q1","y":30,"series":"2024"},{"x":"Q2","y":45,"series":"2024"},{"x":"Q3","y":52,"series":"2024"},{"x":"Q4","y":61,"series":"2024"},{"x":"Q1","y":40,"series":"2025"},{"x":"Q2","y":58,"series":"2025"},{"x":"Q3","y":72,"series":"2025"}]' \
+  --title "Revenue Growth" --y-title "Revenue ($M)" \
+  --series-field series --dark --legend top --output chart.png
+```
+
+![多系列图表](readme-assets/framed-multi.png)
+
+### 📏 水平参考线
+
+使用 `--hline` 添加阈值、目标价位或买入价格。
+
+```bash
+node scripts/chart.mjs --type line \
+  --data '[{"x":"Jan 1","y":0.00072},{"x":"Jan 5","y":0.00085},{"x":"Jan 10","y":0.00091},{"x":"Jan 15","y":0.00078},{"x":"Jan 20","y":0.00062},{"x":"Jan 25","y":0.00071}]' \
+  --title "Token Price" --y-title "Price (USD)" \
+  --dark --show-values --hline "0.0008,#e63946,Buy Price" --output chart.png
+```
+
+![参考线图表](readme-assets/framed-hline.png)
+
+### 🎨 条件着色
+
+基于阈值对柱形/数据点着色——非常适合 KPI 仪表盘。
+
+```bash
+node scripts/chart.mjs --type bar \
+  --data '[{"month":"Jan","score":72},{"month":"Feb","score":45},{"month":"Mar","score":38},{"month":"Apr","score":61},{"month":"May","score":29},{"month":"Jun","score":55},{"month":"Jul","score":82},{"month":"Aug","score":47},{"month":"Sep","score":68},{"month":"Oct","score":34},{"month":"Nov","score":76},{"month":"Dec","score":91}]' \
+  --x-field month --y-field score --x-sort none \
+  --conditional-color "50,#e63946,#2a9d8f" --hline "50,#888,Target" \
+  --title "Monthly Performance Score" --subtitle "Target: 50" --dark
+```
+
+![条件着色图表](readme-assets/framed-conditional.png)
+
+### ↔️ 水平柱状图
+
+翻转坐标轴，适用于排行榜、排名或较长的类别名称。
+
+```bash
+node scripts/chart.mjs --type bar \
+  --data '[{"lang":"Python","stars":95},{"lang":"JavaScript","stars":82},{"lang":"TypeScript","stars":78},{"lang":"Rust","stars":71},{"lang":"Go","stars":63},{"lang":"Java","stars":58},{"lang":"C++","stars":45},{"lang":"Swift","stars":38}]' \
+  --x-field lang --y-field stars --horizontal --sort desc \
+  --conditional-color "60,#e63946,#2a9d8f" --bar-labels \
+  --title "GitHub Stars by Language" --dark
+```
+
+![水平柱状图](readme-assets/framed-horizontal-bar.png)
+
+### 更多图表类型
+
+- **`point`** — 散点图
+- **`candlestick`** — OHLC 金融图表（`--open-field`、`--high-field`、`--low-field`、`--close-field`）
+- **`heatmap`** — 网格可视化（`--color-value-field`、`--color-scheme viridis`）
+- **堆叠柱状图** — `--type bar --stacked --color-field category`
+- **成交量叠加** — 使用 `--volume-field` 的双 Y 轴
+- **迷你图** — 使用 `--sparkline` 的小型内联图表（80×20，无坐标轴）
+
+---
+
+## 简写语法
+
+不想写 JSON？使用简写格式：
+
+```bash
+node scripts/chart.mjs --type bar \
+  --data "Mon:10,Tue:25,Wed:18,Thu:30,Fri:22,Sat:35,Sun:28" \
+  --title "Weekly Activity" --dark --output chart.png
+```
+
+![简写示例](readme-assets/framed-shorthand.png)
+
+格式：`label:value,label:value,...`
+
+---
+
+## 深色模式与浅色模式
+
+使用 `--dark` 实现深色背景（非常适合 Discord、Slack、深色仪表盘）：
+
+![深色模式](readme-assets/framed-horizontal.png)
+
+省略 `--dark` 则为浅色模式（报告、邮件、浅色界面）：
+
+![浅色模式](readme-assets/framed-bar.png)
+
+**给机器人的提示：** 根据时间自动切换——在 20:00–07:00 之间使用 `--dark`。
+
+---
+
+## 告警样式图表
+
+针对监控和告警场景的内置选项：
+
+```bash
+node scripts/chart.mjs --type line --data '[...]' \
+  --title "Iran Strike Odds (48h)" \
+  --show-change --focus-change --show-values --dark \
+  --output alert.png
+```
+
+| 选项 | 效果 |
+|------|--------|
+| `--show-change` | 标注首尾数据点的变化百分比 |
+| `--focus-change` | 将 Y 轴缩放至数据范围的 2 倍以突出变化 |
+| `--focus-recent N` | 仅显示最后 N 个数据点 |
+| `--show-values` | 在图表上标注最大值/最小值峰值 |
+
+---
+
+## 数据管道输入
+
+从标准输入读取：
+
+```bash
+curl -s api.example.com/metrics | node scripts/chart.mjs --type line --dark --output metrics.png
+echo '[{"x":"A","y":1},{"x":"B","y":2}]' | node scripts/chart.mjs --output out.png
+```
+
+---
+
+## 选项参考
+
+### 核心
+| 选项 | 描述 | 默认值 |
+|--------|-------------|---------|
+| `--type` | `line`、`bar`、`area`、`point`、`pie`、`donut`、`candlestick`、`heatmap` | `line` |
+| `--data` | JSON 数组或简写 `key:val,...` | 标准输入 |
+| `--output` | 输出文件路径 | `chart.png` |
+| `--title` | 图表标题 | — |
+| `--subtitle` | 标题下方的副标题 | — |
+| `--width` | 宽度（像素） | `600` |
+| `--height` | 高度（像素） | `300` |
+| `--dark` | 深色主题 | `false` |
+| `--svg` | 输出 SVG 而非 PNG | `false` |
+
+### 坐标轴
+| 选项 | 描述 | 默认值 |
+|--------|-------------|---------|
+| `--x-field` | X 轴字段名 | `x` |
+| `--y-field` | Y 轴字段名 | `y` |
+| `--x-title` / `--y-title` | 坐标轴标签 | 字段名 |
+| `--x-type` | `ordinal`、`temporal`、`quantitative` | `ordinal` |
+| `--y-domain` | Y 轴范围，格式为 `"min,max"` | 自动 |
+| `--y-format` | `percent`、`dollar`、`compact`、`decimal4`、`integer`、`scientific` | 自动 |
+
+### 样式
+| 选项 | 描述 | 默认值 |
+|--------|-------------|---------|
+| `--color` | 主色调 | `#e63946` |
+| `--color-scheme` | Vega 配色方案（例如 `viridis`、`category10`） | — |
+| `--no-grid` | 移除网格线 | `false` |
+| `--legend` | `top`、`bottom`、`left`、`right`、`none` | — |
+| `--hline` | 参考线：`"value,color,label"`（可重复） | — |
+
+### 多系列
+| 选项 | 描述 |
+|--------|-------------|
+| `--series-field` | 分割为多条线的字段 |
+| `--stacked` | 堆叠柱状图/面积图 |
+| `--color-field` | 颜色编码的字段 |
+
+### 注释
+| 选项 | 描述 |
+|--------|-------------|
+| `--show-change` | 显示变化百分比标注 |
+| `--focus-change` | 缩放 Y 轴以突出变化 |
+| `--focus-recent N` | 仅显示最后 N 个数据点 |
+| `--show-values` | 标注最大值/最小值峰值 |
+| `--annotations` | 事件标记的 JSON 数组：`[{"x":"14:00","label":"News"}]` |
+
+---
+
+## Y 轴格式
+
+```bash
+--y-format dollar    # → $1,234.56
+--y-format percent   # → 45.2%
+--y-format compact   # → 1.2K、3.4M
+--y-format decimal4  # → 0.0004
+--y-format integer   # → 1,234
+```
+
+或者传入任意 [d3-format](https://github.com/d3/d3-format) 格式字符串：`--y-format ',.3f'`
+
+---
+
+## 专为 Fly.io / VPS / Docker 设计
+
+本技能专为无头服务器环境打造，在这些环境中你无法（或不想）安装浏览器：
+
+- **Fly.io** — 在 `flyctl deploy` 上开箱即用。无需特殊 Dockerfile。
+- **Docker** — 无需 `apt-get install` 安装 Cairo/Pango 等。只需 `npm install`。
+- **VPS** — 可在任何安装了 Node.js 18+ 的机器上运行。无需 GPU，无需显示服务器。
+- **CI/CD** — 在 GitHub Actions、GitLab CI 等环境中生成图表。
+
+秘诀：[Vega-Lite](https://vega.github.io/vega-lite/) 原生渲染为 SVG，然后 [Sharp](https://sharp.pixelplumbing.com/)（使用预编译的 libvips 二进制文件）将其转换为 PNG。全程无需浏览器参与。
+
+---
+
+## 许可证
+
+MIT
+
+---
+
+<p align="center">
+  <sub>由 <a href="https://clawhub.ai/u/Cluka-399">@Cluka-399</a> 构建 · 发布在 <a href="https://clawhub.ai">ClawHub</a> · <a href="https://github.com/Cluka-399/chart-image">GitHub</a></sub>
+</p>
@@ -0,0 +1,9 @@
+# WeHub 来源说明
+
+- Skill 名称：`chart-image`
+- 中文类目：数据驱动的图表/可视化生成
+- 上游仓库：`zebbern__claude-code-guide`
+- 上游路径：`skills/chart-image/SKILL.md`
+- 上游链接：https://github.com/zebbern/claude-code-guide/blob/HEAD/skills/chart-image/SKILL.md
+- 本仓库为 WeHub 中文 Skill 汉化包，基于 skill 市场筛选 Top200 清单整理
+- 原作者、版权和许可证信息以上游仓库为准
@@ -0,0 +1,322 @@
+---
+name: chart-image
+version: 2.5.1
+description: "从数据生成适合出版质量的 PNG 图表图片，支持折线图、柱状图、面积图、K 线图、饼图和热力图。当用户要求可视化数据、创建图表、绘制时间序列或为报告、警报、仪表盘生成图表时触发。作为轻量级无头 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）
+
+## 安装（一次性）
+
+```bash
+cd /data/clawd/skills/chart-image/scripts && npm install
+```
+
+## 快速使用
+
+```bash
+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
+```
+
+## 图表类型
+
+### 折线图（默认）
+```bash
+node chart.mjs --type line --data '[{"x":"A","y":10},{"x":"B","y":15}]' --output line.png
+```
+
+### 柱状图
+```bash
+node chart.mjs --type bar --data '[{"x":"A","y":10},{"x":"B","y":15}]' --output bar.png
+```
+
+### 面积图
+```bash
+node chart.mjs --type area --data '[{"x":"A","y":10},{"x":"B","y":15}]' --output area.png
+```
+
+### 饼图 / 环形图
+```bash
+# 饼图
+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）
+```bash
+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
+```
+
+### 热力图
+```bash
+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
+```
+
+### 多系列折线图
+在同一张图表上比较多个趋势：
+```bash
+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
+```
+
+### 堆叠柱状图
+```bash
+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 轴）
+价格折线图叠加成交量柱状图：
+```bash
+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
+```
+
+### 迷你图（小型内联图表）
+```bash
+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` | 堆叠/颜色分类字段 | - |
+
+### K 线图选项
+| 选项 | 描述 | 默认值 |
+|--------|-------------|---------|
+| `--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 |
+
+**示例：** 收入柱状图（左侧）+ 流失面积图（右侧）：
+```bash
+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"
+```
+
+### 成交量叠加选项（K 线图）
+| 选项 | 描述 | 默认值 |
+|--------|-------------|---------|
+| `--volume-field` | 成交量柱状图的字段（启用双轴） | - |
+| `--volume-color` | 成交量柱状图的颜色 | #4a5568 |
+
+### 格式化选项
+| 选项 | 描述 | 默认值 |
+|--------|-------------|---------|
+| `--y-format` | Y 轴格式：percent, dollar, compact, decimal4, integer, scientific 或 d3-format 字符串 | auto |
+| `--subtitle` | 图表标题下方的副标题文本 | - |
+| `--hline` | 水平参考线："数值"或"数值,颜色"或"数值,颜色,标签"（可重复） | - |
+
+### 标注选项
+| 选项 | 描述 | 默认值 |
+|--------|-------------|---------|
+| `--annotation` | 静态文本标注 | - |
+| `--annotations` | JSON 格式的事件标记数组 | - |
+
+## 警报样式图表（推荐用于监控）
+
+```bash
+node chart.mjs --type line --data '[...]' \
+  --title "Iran Strike Odds (48h)" \
+  --show-change --focus-change --show-values --dark \
+  --output alert.png
+```
+
+仅显示最近动态：
+```bash
+node chart.mjs --type line --data '[hourly data...]' \
+  --focus-recent 4 --show-change --focus-change --dark \
+  --output recent.png
+```
+
+## 时间线标注
+
+在图表上标记事件：
+```bash
+node chart.mjs --type line --data '[...]' \
+  --annotations '[{"x":"14:00","label":"News broke"},{"x":"16:30","label":"Press conf"}]' \
+  --output annotated.png
+```
+
+## 时间 X 轴
+
+适用于带日期间隔的时序数据：
+```bash
+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 轴格式化
+
+格式化坐标轴数值以增强可读性：
+```bash
+# 金额格式
+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`
+
+## 图表副标题
+
+在标题下方添加上下文信息：
+```bash
+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）**：浅色模式（默认）
+
+## 管道传输数据
+
+```bash
+echo '[{"x":"A","y":1},{"x":"B","y":2}]' | node chart.mjs --output out.png
+```
+
+## 自定义 Vega-Lite 规范
+
+用于高级图表：
+```bash
+node chart.mjs --spec my-spec.json --output custom.png
+```
+
+## ⚠️ 重要提示：务必发送图片！
+
+生成图表后，**务必将其发送回用户的频道**。
+不要仅仅保存到文件并描述——关键在于可视化呈现。
+
+```bash
+# 1. 生成图表
+node chart.mjs --type line --data '...' --output /data/clawd/tmp/my-chart.png
+
+# 2. 发送它！使用带 filePath 的 message 工具：
+#    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*
@@ -0,0 +1,6 @@
+{
+  "ownerId": "kn7caxjvqk9fengp67p290smnn800sv9",
+  "slug": "chart-image",
+  "version": "2.5.1",
+  "publishedAt": 1772178669897
+}
@@ -0,0 +1,9 @@
+{
+  "name": "chart-image-scripts",
+  "type": "module",
+  "dependencies": {
+    "vega": "^5.30.0",
+    "vega-lite": "^5.21.0",
+    "sharp": "^0.33.0"
+  }
+}