# 图表系统参考
> 14种图型 + 三轴决策树 + 拦截规则 + 色板 + HTML骨架
> 版本: 1.0 | 画布: 横版 640×auto / 方版 640×640
---
## 1. 三轴决策树
```
数据关系是什么？（轴1: 变量类型）
│
├─ 类别比较（1分类 + 1连续）
│ ├─ 少类别 (2-6) → bar-chart
│ └─ 多类别 (7+) → horizontal-bar-chart
│
├─ 时间变化（1时间 + 1连续）
│ ├─ 少数据点 (2-8) → bar-chart
│ └─ 多数据点 (8+) → line-chart
│
├─ 占比关系（1分类看构成）
│ ├─ 少分段 (2-5) → donut-chart
│ └─ 多分段 (6+) → treemap
│
├─ 相关性（2+连续变量）
│ ├─ 2变量 → scatter-plot
│ ├─ 2变量+阈值 → quadrant-chart
│ └─ 3+变量 → bubble-chart
│
├─ 流程（顺序/并行步骤）
│ ├─ 顺序步骤 → flow-chart
│ ├─ 并行泳道 → swimlane-chart
│ └─ 状态转换 → state-machine
│
├─ 层级（嵌套/分类结构）
│ ├─ 树结构 → tree-chart
│ └─ 分层架构 → layered-diagram
│
├─ 集合重叠
│ └─ 2-3集合 → venn-diagram
│
└─ 累积变化
└─ 正负贡献 → waterfall-chart
```
### 同一数据不同论点 → 不同图
| 数据 | 论点"比较" | 论点"趋势" | 论点"占比" |
|------|-----------|-----------|-----------|
| 2020-2024年收入 | bar-chart（4组对比） | line-chart（增长趋势） | — |
| 3产品市场份额 | bar-chart（谁最大） | — | donut-chart（各占多少） |
| 用户画像标签 | h-bar-chart（排名） | — | treemap（层级占比） |
---
## 2. 14种图型
| # | Type | When | Data Shape | Format |
|---|------|------|-----------|--------|
| 1 | **bar-chart** | 2-6类别比较 | `[{label, value, color?}]` | 横版 |
| 2 | **horizontal-bar-chart** | 7+类别或长标签 | `[{label, value, color?}]` | 横版 |
| 3 | **line-chart** | 8+时间点趋势 | `{labels, series:[{name,values,color?}]}` | 横版 |
| 4 | **donut-chart** | 2-5段占比 | `[{label, value, color}]` | 方版 |
| 5 | **quadrant-chart** | 2轴+阈值线 | `{xLabel, yLabel, items:[{name,x,y}]}` | 方版 |
| 6 | **flow-chart** | 3-8步顺序流程 | `{steps:[{id,label,type?}], connections:[{from,to}]}` | 横版 |
| 7 | **swimlane-chart** | 2-4角色并行流程 | `{lanes:[{name,steps}]}` | 横版 |
| 8 | **state-machine** | 状态转换+条件 | `{states, transitions}` | 方版 |
| 9 | **tree-chart** | 层级结构 | `{root:{label,children}}` | 横版 |
| 10 | **layered-diagram** | 分层架构 | `{layers:[{name,items,color?}]}` | 横版 |
| 11 | **venn-diagram** | 2-3集合重叠 | `{sets, overlap}` | 方版 |
| 12 | **waterfall-chart** | 累积正负贡献 | `[{label,value,type}]` | 横版 |
| 13 | **treemap** | 多类别层级占比 | `[{label,value,color?,children?}]` | 方版 |
| 14 | **scatter-plot** | 2连续变量关系 | `{xLabel, yLabel, items:[{name,x,y}]}` | 方版 |
### 补充: data-billboard（非独立图型，用于单一数值高亮）
| Type | When | Data Shape | Format |
|------|------|-----------|--------|
| **data-billboard** | 单一关键数值 | `{value, label, context?, stats:[{value,label}]}` | 方版 |
---
## 3. 拦截规则详解
| # | 触发条件 | 问题 | 替代方案 | 话术模板 |
|---|---------|------|---------|---------|
| I1 | 2个数据点画折线 | 2点折线无趋势意义 | bar-chart | "2个数据点画折线图看不出趋势，改用柱状图更直观" |
| I2 | 7+类别画donut | 角度比较超过5段人眼难分 | horizontal-bar-chart | "7+类别画环形图角度难区分，横向柱状图长度比较更清晰" |
| I3 | 单一数值做数据图 | 1个数字不需要图 | data-billboard | "单个数值不需要复杂图表，用数字高亮卡更有冲击力" |
| I4 | 一图>2论点 | 信息过载 | 拆图 | "一张图承载多个论点会稀释每个论点的传达力，建议拆分" |
| I5 | 类别变量用折线 | 暗示不存在的连续关系 | bar-chart | "类别变量之间没有连续关系，折线会误导读者，改用柱状图" |
| I6 | Y轴不从0起 | 误导小差异看起来很大 | 加断裂标记或从0起 | "Y轴不从0起会夸大差异，建议从0起或加明显的轴断裂标记" |
| I7 | rainbow/jet色图 | 感知不均匀 | 主题色板+冗余编码 | "彩虹色图感知不均匀会造假峰，改用色盲安全色板" |
| I8 | 图例压数据 | 遮挡关键信息 | 调整图例位置 | "图例遮挡了数据，建议移到空白区域" |
---
## 4. 色盲安全色板
### Okabe-Ito 8色（默认）
```css
:root {
--chart-1: #E69F00; /* 橙 */
--chart-2: #56B4E9; /* 天蓝 */
--chart-3: #009E73; /* 青绿 */
--chart-4: #D55E00; /* 朱红 */
--chart-5: #CC79A7; /* 粉紫 */
--chart-6: #F0E442; /* 黄 */
--chart-7: #0072B2; /* 深蓝 */
--chart-8: #000000; /* 黑 */
}
```
### 使用规则
1. **单图不超4色** — 超过4类时合并小类为"其他"
2. **冗余编码** — 不同类别加不同形状(marker)或线型(dashed/solid/dotted)
3. **灰度可分** — 出图前想象灰度版，颜色仍可区分
4. **强调色** — 需要高亮某一类时用 `--accent`，其余用 `--chart-*`
### 冗余编码参考
| 类别 | 颜色 | 形状 | 线型 |
|------|------|------|------|
| A | --chart-1 | circle ● | solid |
| B | --chart-2 | square ■ | dashed |
| C | --chart-3 | triangle ▲ | dotted |
| D | --chart-4 | diamond ◆ | dash-dot |
---
## 5. Chart Styling Rules
- **Typography**: 标题 `--font-body` 20-24px/500; 轴标 12px/400 `--muted`; 数据标 13px/500 `tabular-nums`; 来源 11px `--muted`
- **Spacing**: 内边距 40-48px; 图例间距 16px; 图例项间距 8px
- **SVG**: 用 `viewBox` + `width:100%` + `height:auto`
- **A11y**: `role="img"` + `aria-label`; 不纯靠颜色区分
- **Source**: 每张图底部必须标注数据来源
---
## 6. HTML骨架（每种图型）
### bar-chart (640×auto)
```html
```
### line-chart (640×auto)
```html
趋势
标题
数据来源：XXX
```
### donut-chart (640×640)
```html
```
### data-billboard (640×640)
```html
关键数据
2.4 亿
中国灵活就业人口
占全国就业人口的近三分之一
数据来源：XXX
```
### flow-chart (640×auto)
```html
```
---
## 7. 自动选图集成
内容解析后自动建议：
| 数据信号 | 推荐图型 |
|---------|---------|
| "A占X%，B占Y%" | bar-chart / h-bar-chart |
| "逐年/逐月增长" | line-chart |
| "分为三部分/占比" | donut-chart |
| "A→B→C步骤" | flow-chart |
| "包含/下属/层级" | tree-chart / layered-diagram |
| "正相关/负相关" | scatter-plot |
| "同时属于/交集" | venn-diagram |
| "贡献了/减少了" | waterfall-chart |