# Design Chart

> 数据可视化图表专项方法论。当载体是数据图表/HTML/报告且需要"把数据变精致可读的图"时触发。覆盖：数据形状选图主键、一图一结论、标题写结论、细读型vs快读型、视觉编码诚实性、色彩语义、交互三问、库外新图现场造句、敢于说不、图表交付自检13项。触发词：「数据可视化」「图表」「做几张图」「把这数据画一下」「dashboard」「report」「一图一结论」。

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

---


# design-chart ｜ 数据可视化图表专项

> 本技能是 design-workflow 主技能抽离出的**专项方法论**，专治"把数据变成诚实、精致、可读的图表"。当任务输入是「数据」（表格/CSV/一组数字）且载体是图表页/HTML/报告时，独立触发或由主技能路由而来。
> 来源署名见 `../references/来源署名/lieflat-charts.md`（lieflat-charts 开源图表方法论 / AI 可视化 skill）。

## 核心信条

图表不是"画个图"，是**把数据形状诚实地映射成视觉通道**，并让读者一眼读懂唯一结论。每张图都要经得起三问：
1. 每个视觉通道编码了什么数据维度？（无装饰性编码）
2. 去掉颜色 / 简化后，结构是否仍读得懂？
3. 这张图到底在讲哪一件事？

## 一、输出形式判定（图表 vs 报告）

- **图表（默认）**：用户只给数据，或说"可视化/分析数据/做几张图/做个图表页"——产出单图或图表页。**没有"报告"关键词时不得自行升级成报告。**
- **报告（升级）**：只有用户明确说"报告/年报/月报/白皮书/调研一页纸/海报/brief/dashboard 报告"等完整叙事交付，才读报告模板、按场景选版式、单页聚合多图。
- 有歧义仍选**图表**：只说"分析"但无报告关键词 → 先交付最强单图或 2–3 张证据图；可在文字中提示"如需完整报告可切换"，但不直接生成报告。（报告模式 ≠ "多画几张图"。）
- 报告内的图表仍遵守图表的数据契约：报告模板定整页结构，页内每张图独立选型。
- 语言：用户未指定时跟随输入语言；同版本内不混中英。

## 二、选型先于画图：数据形状是主键

别问用户要什么图，看他数据长什么样——**数据形状决定可选图型，不是用户口中的图名**：
- **类目比较**（几个类谁高谁低）→ 柱状 / 条形
- **时间序列**（随时间变化）→ 折线 / 面积
- **占比构成**（部分占整体）→ 饼 / 环形 / 堆叠
- **带正负**（增减盈亏）→ 双向条 / 正负柱
- **多对一归属**（多个元素归到一个类）→ 树 / 力导向
- **网络 / 关系** → 节点图
- **逐条记录分布** → 散点 / 直方图

非程序员说人话（"把这季度转化画一下发公众号"），设计者职责是翻译成正确的图，且好看到能直接发出去。

## 三、一张图只承载一个独立结论

- **图数由独立结论数决定**，不由"有多少数据列"：单指标 → 1 张最强图；2–3 结论 → 2–3 张；文章/案例 → 4–6 张；用户明确数量按用户。
- 默认单页 ≤ 6 张；两图讲同一结论只留场合更合适、契约更诚实的一张。候选对比稿不计入成品图数。

## 四、标题写结论，不写图型名

- "Where we gained, where we bled" 优于 "柱状图"；更好是带判断的标题。
- 副标题说清图例·单位·时间范围（读者不看代码只看这一行）。

## 五、两种阅读速度（按场合选，不按静态/交互分）

| | 细读型 | 快读型 |
|---|---|---|
| 基本单元 | 记录（一点=一条数据） | 形状（粗柱/大数/色块） |
| 线条 | 发丝级 | 2px+ 粗 |
| 聚合 | 摊开原材料、拒绝预聚合 | 提前聚合给结论 |
| 读法 | 凑近读 30s+ | 扫一眼 <10s |
| 场合 | 年报/对外故事/海报/论文 | 周报/dashboard/监控/随手贴 |

**默认先细读型**：无明确"三秒快读/dashboard"场合时，不从快读型起步；只有细读型无合适模板、或用户明确要快读时，才降级到快读型（并写明细读型为何不适配）。

## 六、视觉编码诚实性（红线）

- **长度∝数值**：柱/条长度严格正比于数值；**柱状图不断轴**——断轴毁掉"长度即值"的契约。极端值场景的正确做法：①让极端值冲天（最诚实）②主图+放大镜小图 ③撕柱不撕轴（并明说画不下）。
- **面积用 sqrt 换算**：涉及半径/面积的编码，半径 = sqrt(v) 再乘比例，不得拿数值直接当半径（面积∝值²会放大差异）。
- **明度即数据**：单色系里最重要=最黑（暗底反转为最亮）；多系列按重要性沿灰阶分配，不按出现顺序随便拿。颜色承载语义，不是装饰。
- **数值∝视觉严格成正比**：重绘两次同一数据图形长得一样（示例数据用确定性伪随机，禁用非确定性随机）。

## 七、色彩语义（单色系优先）

- **同一份交付只用一种色彩系统**：灰阶 / 一套有序明度阶 / 一套分类色 / 一套带强调色的体系，四选一，不混用。
- 类目 > 6 时退回灰阶（彩色容量不足）；颜色不能成为唯一线索——去掉颜色后结构仍读得懂（色盲友好）。
- 强调色只给一个主角，第二个主角会消解强调。
- 颜色必须连接真实维度（序数梯接数值、分段色接月份/区段、分类色接类目），底注写清编码了什么。

## 八、图表语境下的关系规则（CRAP 变形）

- **对比**：用明暗/长短/冷暖反差制造焦点，而非"差不多"的近似色。
- **对齐**：坐标轴/刻度/基线共基准；同类图型同一网格节奏。
- **亲密性**：相关数据（图例·时间范围·单位）聚在副标题一处，不与图分离。
- **图底**：网格线/发丝线低存在感，主体数据从中跳出；暗卡（深色底）只给"必须暗底衬托"的形，且每屏限 1 张。

## 九、交互三问（决定静态还是可交互）

1. 元素背后有没有一条真实记录？没有（纯装饰/肌理）→ 禁止加交互，给无内容元素加 hover 是欺骗。
2. 有记录 → 不点能不能读出？元素 < 50 且两端有标注 → 静态够用，hover 锦上添花。
3. 元素 > 50 或多段路径 → 必须 hover/pin，否则只是氛围图。

## 十、库外新图 = 现场造句（抄形不抄魂 = 白做）

用户要的图不在已知图型里（或给参考图）时：
1. **先答"本体"**——每个视觉通道编码了什么数据维度？答不出就问用户拿数据结构。
2. **找数据形状最近的已知图型当骨架**。
3. **用统一视觉 token 造句**（不发明新颜色新字号），产出要"一眼一家人"。
4. **过本层与形式层的硬规则**。

## 十一、敢于说不（边界）

- 断轴柱、发光/玻璃拟态/3D、多色相画单序列、类目>6 还彩色、未明确要地图就因数据含地区字段自动用地图——全部拒绝并给诚实替代。

## 十二、图表交付自检清单（完稿前逐条核）

- [ ] **数值∝视觉**：柱没断轴？面积编码用了 sqrt？长度/角度/明度与数值严格成正比？
- [ ] **色板受控**：整份/同组交付只用了一种色彩系统（灰阶 / 单一预设 / 单一 custom）？无跨系统混色？
- [ ] **标签不重叠**：邻近峰值/密集类目标签是否强制最小间距，无相互压字？
- [ ] **最小字号踩线**：半宽卡 ≥6.5px、通栏/大图 ≥5.5px？装不下的信息改 hover 出，未缩小字号硬塞？
- [ ] **确定性数据**：示例数据用确定性伪随机，刷新两次长得一样？
- [ ] **动效降级**：reveal（滚入播+点击重播）正常？带 `prefers-reduced-motion` 降级？
- [ ] **卡片四件套**：结论式标题（非图型名）+ 副标题（图例·单位·时间）+ 图 + 来源行（全大写加字距）齐全？
- [ ] **全量候选审计**：是否写下 ≥3 个候选图型及淘汰理由（不只是"采用了哪个"）？是否先从细读型审计、必要时才降级快读型？
- [ ] **一图一结论**：每张图是否只承载一个独立结论？重复结论的图是否已合并/删减？
- [ ] **同组不重复**：一页多图是否模板/轮廓轮换、未全变成同一种径向/横条、暗卡未过量？
- [ ] **地图显式触发**：仅用户明确要地图才用；数据含地区字段未自动触发地域着色？
- [ ] **交互诚实**：纯装饰元素未加 hover；>50 元素才要求可交互？
- [ ] **放回检验**：这张图放回所选"图型家族"旁，是否同一套视觉语法，而不只是"风格有点像"？

## 边界与维护

- 本技能只管"数据→图型"的选型、编码诚实与品味，**不绑定任何图型库/引擎**（ECharts / Chart.js 等仅为实现手段，本技能不依赖）。
- 具体 hex 色值、平台名、图型编号等实现层细节不内嵌（见来源署名红线）。
- 若要在通用设计流程里用：由主技能 `design-workflow` 在载体=图表页/报告页时路由到本技能。