图表图片生成

技能文档

---
name: chart-image
title: 图表图片生成
category: 开发工具
description: "从数据生成出版级 PNG 图表图片，支持折线图、柱状图、面积图和散点图。当用户需要数据可视化、生成图表图片、绘制趋势图、为报告或告警生成图表时触发。触发词：图表生成、数据可视化、生成图表、折线图、柱状图"
---

# 图表图片生成

使用 Vega-Lite 从数据生成 PNG 图表图片，适用于无头服务器环境。

## 核心优势

- **无需原生编译** — 使用 Sharp 预编译二进制文件，无需构建工具
- **无需浏览器** — 纯 Node.js，无 Chrome 依赖，无无头浏览器开销
- **轻量级** — 依赖约 15MB，Puppeteer 方案需 400MB+
- **冷启动快** — 无浏览器启动延迟，图表生成 <500ms
- **离线可用** — 无外部 API 调用

## 技能工作流

### 步骤1：安装依赖（首次使用）

```bash
cd <技能目录>/scripts && npm install
```

### 步骤2：确定图表类型与数据

支持折线图（line）、柱状图（bar）、面积图（area）、散点图（point）。准备 JSON 数组格式的数据点。

### 步骤3：执行生成命令

```bash
node <技能目录>/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
```

### 步骤4：选择主题

- 夜间（20:00-07:00）：添加 `--dark` 参数
- 日间（07:00-20:00）：使用默认浅色主题

## 常用命令示例

### 告警风格图表

```bash
node <技能目录>/scripts/chart.mjs \
  --type line \
  --data '[...]' \
  --title "本周数据变化" \
  --show-change \
  --focus-change \
  --show-values \
  --dark \
  --output alert.png
```

### 多系列折线图

```bash
node <技能目录>/scripts/chart.mjs \
  --type line \
  --series-field "market" \
  --data '[{"x":"Jan","y":10,"market":"A"},{"x":"Jan","y":15,"market":"B"},{"x":"Feb","y":12,"market":"A"},{"x":"Feb","y":18,"market":"B"}]' \
  --title "对比趋势" \
  --output multi.png
```

每个 `--series-field` 的唯一值会成为独立的彩色折线，并附带图例。

### 堆叠柱状图

```bash
node <技能目录>/scripts/chart.mjs \
  --type bar \
  --stacked \
  --color-field "category" \
  --data '[{"x":"周一","y":10,"category":"工作"},{"x":"周一","y":5,"category":"个人"}]' \
  --title "各类别耗时" \
  --output stacked.png
```

### 迷你图（Sparkline）

```bash
node <技能目录>/scripts/chart.mjs \
  --sparkline \
  --data '[{"x":"1","y":10},{"x":"2","y":15},{"x":"3","y":12}]' \
  --output spark.png
```

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

## 参数说明

| 参数 | 说明 | 默认值 |
|------|------|--------|
| `--type` | 图表类型：`line`/`bar`/`area`/`point` | line |
| `--data` | JSON 数组格式数据点 | - |
| `--spec` | 完整 Vega-Lite spec 文件路径 | - |
| `--output` | 输出 PNG 路径 | chart.png |
| `--title` | 图表标题 | - |
| `--width` | 宽度（像素） | 600 |
| `--height` | 高度（像素） | 300 |
| `--x-field` | X 轴字段名 | x |
| `--y-field` | Y 轴字段名 | y |
| `--x-title` | X 轴标签 | 字段名 |
| `--y-title` | Y 轴标签 | 字段名 |
| `--color` | 线条/柱体颜色 | #e63946 |
| `--y-domain` | Y 轴范围，格式 "min,max" | 自动 |
| `--show-change` | 显示 +/-%% 变化标注 | false |
| `--focus-change` | 缩放 Y 轴至数据范围 2 倍 | false |
| `--focus-recent N` | 仅显示最后 N 个数据点 | 全部 |
| `--show-values` | 标注最小/最大峰值 | false |
| `--dark` | 深色模式 | false |
| `--svg` | 输出 SVG 而非 PNG | false |
| `--sparkline` | 迷你内联图表（80x20，无坐标轴） | false |
| `--stacked` | 堆叠柱状图（需配合 --color-field） | false |
| `--color-field` | 堆叠分类字段名 | - |
| `--series-field` | 多系列折线图字段名 | - |

## 管道输入

```bash
echo '[{"x":"A","y":1},{"x":"B","y":2}]' | node <技能目录>/scripts/chart.mjs --output out.png
```

## 自定义 Vega-Lite Spec

高级图表可传入完整 Vega-Lite spec 文件：

```bash
node <技能目录>/scripts/chart.mjs --spec my-spec.json --output custom.png
```

使用说明

# 图表图片生成

从数据生成出版级 PNG 图表，纯 Node.js 实现，无需浏览器，适用于服务器环境。

## 使用

生成折线图：

```bash
node <技能目录>/scripts/chart.mjs \
  --type line \
  --data '[{"x":"1月","y":10},{"x":"2月","y":20},{"x":"3月","y":15}]' \
  --title "月度趋势" \
  --output chart.png
```

支持 `line`（折线图）、`bar`（柱状图）、`area`（面积图）、`point`（散点图），以及深色模式、迷你图、堆叠图和多系列图表。

## 工作原理

基于 Vega-Lite 渲染引擎，使用 Sharp 预编译二进制输出 PNG。首次使用需在 scripts 目录执行 `npm install` 安装依赖。

如何安装此技能？

访问技能市场，点击「安装」按钮，按提示将技能包放入 AI 编程助手的 skills 目录即可。