# Canvas Design

> 工程图表与可视化设计技能。当需要生成监测趋势图、断面剖面图、测点分布示意图或其他工程可视化图表时加载此技能。

- Skill: `wangjiawei508/canvas-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add wangjiawei508/canvas-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/wangjiawei508/canvas-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: wangjiawei508 (https://skillmd.com/u/wangjiawei508)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/wangjiawei508/canvas-design

---


## 适用场景

- 监测时序趋势折线图（沉降、位移、轴力随时间变化）
- 基坑断面剖面示意图
- 测点布置示意图
- 多测点对比柱状图
- 预警等级分布饼图/环形图
- 报告中需要插入的任何工程图表

## 可用工具

### `chart_generator`（SVG 趋势图生成）

系统内置的图表工具，专为监测时序数据设计。

参数说明：

| 参数 | 类型 | 说明 |
|------|------|------|
| `data` | 数组 | 时序数据，每条含 point_id/date/value |
| `title` | 字符串 | 图表标题 |
| `alertThreshold` | 数字 | 报警阈值，显示为红色水平虚线 |
| `outputPath` | 字符串 | SVG 输出路径 |

输出：800×400px SVG 文件，含多测点折线、图例、网格线和报警线。

## 图表设计规范

### 配色方案

趋势图使用以下 10 色系列区分不同测点：

```
#2563eb  蓝色（第1条线）
#dc2626  红色（第2条线）
#16a34a  绿色（第3条线）
#ca8a04  黄色（第4条线）
#9333ea  紫色（第5条线）
#0891b2  青色（第6条线）
#e11d48  玫红色（第7条线）
#65a30d  黄绿色（第8条线）
#c026d3  品红色（第9条线）
#ea580c  橙色（第10条线）
```

报警线固定为：`#dc2626` 红色虚线（stroke-dasharray: 6,4）

### 坐标轴规范

| 元素 | 规范 |
|------|------|
| X 轴 | 日期或期次编号，间隔显示避免重叠（超过10个日期时旋转45°） |
| Y 轴 | 监测值，单位标注在轴标题中（如"累计变化量 (mm)"） |
| 网格线 | 浅灰色（`#e5e7eb`），水平网格线为主 |
| 刻度 | 自动计算合理间距，避免小数位过多 |

### 图表标题规范

格式：`[监测项目] + [时间范围/描述]`

示例：
- 地表沉降监测趋势图（2025年1月-3月）
- DB-01~DB-05 累计沉降量变化曲线
- 第三道支撑轴力监测趋势图
- 深层水平位移剖面图（CX-02，第15期）

### 图例

- 位置：图表上方或右侧，不遮挡数据区域
- 格式：线段颜色 + 测点编号
- 当测点超过 6 个时，分两行显示

## 典型图表场景

### 沉降趋势图

```
调用 chart_generator，传入：
data: [
  { point_id: "DB-01", date: "2025-01-15", value: -2.3 },
  { point_id: "DB-01", date: "2025-01-22", value: -4.1 },
  ...
  { point_id: "DB-02", date: "2025-01-15", value: -1.8 },
  ...
]
title: "地表沉降监测趋势图"
alertThreshold: -30
outputPath: "./沉降趋势图.svg"
```

注意：沉降值通常为负数（向下为正），图表 Y 轴应体现方向性。

### 多期对比（需自行构造 SVG）

当 `chart_generator` 不满足需求时（如需要柱状图、剖面图），可直接编写 SVG 代码：

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400">
  <!-- 标题 -->
  <text x="400" y="30" text-anchor="middle" font-size="16" font-weight="600">图表标题</text>
  <!-- 坐标系 -->
  <!-- 数据绑定 -->
</svg>
```

手写 SVG 时遵循以下规范：
- viewBox 统一为 `0 0 800 400`（与 chart_generator 一致）
- 字体使用 `font-family="PingFang SC, Microsoft YaHei, sans-serif"`
- 数值文字使用 `font-variant-numeric: tabular-nums`

### 测斜仪深层位移剖面图

这类图表 `chart_generator` 不直接支持，需构造 SVG：

```
X 轴：位移量（mm），正方向为远离基坑方向
Y 轴：深度（m），从上到下递增（地面在顶部）
数据线：各期位移剖面，用不同颜色区分
标注：管口标高、地面标高、支撑位置（水平虚线标注）
```

## 报告中使用图表的规范

1. 每张图必须有图号和图名：`图 X-X [图名]`
2. 图表下方注明数据来源期次和日期
3. SVG 输出后告知用户文件路径，用户可在 Word 中手动插入
4. 一份日报通常包含 1-2 张趋势图，月报/总结报告包含 5-10 张
5. 图表与正文分析必须对应——图中标注的异常点在正文中必须有解释

## 注意事项

- `chart_generator` 输出纯 SVG 文件，可在浏览器直接打开预览
- SVG 可无损缩放，适合打印；建议在报告中以 50%-75% 宽度插入
- 超过 10 条测点线时图表会变得拥挤，建议分组出图（如按断面分）
- 时序数据日期跨度超过 6 个月时，X 轴建议按月显示而非按日
- 颜色选择需考虑黑白打印场景——重要的报警线使用虚线+标签双重标识