# 组件 — 图表由哪些部件组成

图表由这些部件构建，在纯 HTML/SVG 中组装。第 0 层是一切的基础；系统层是使方法可移植的（并且本身就是本技能）。

## 第 0 层 — 基础
- **颜色角色** — 分类（8 × 亮/暗）、顺序色阶、发散对、状态（4）、弱化 / "其他"、灰度图表家具（坐标轴/网格/标签/表面）。定义为 HTML 顶部的 CSS 自定义属性 — 见 `palette.md`。
- **纹理填充** — 方向性填充 + 45° / 135° 旋转。
- **图表容器** — 一个 `<figure>`（或卡片 `<div>`），拥有响应式尺寸、标题/说明文字和**表格视图切换**（每个图表的无障碍孪生）。**任何固定高度包括 x 轴带**（绘图高度 + 轴标签），使卡片永远不会得到嵌套垂直滚动；优先让容器随其内容增加。
- **图例**（切换以隔离、感知纹理的色板）· **工具提示** · **坐标轴** · **数据标签**。

## 第 1 层 — 人们要求的图表
- **条形图** — 分组 + 堆叠，默认细条，水平 + 垂直。
- **折线图** — 多系列，软填充面积变体，无障碍标记。
- **统计瓦片** — 值 + 增量 + 可选迷你图（数字合约）。
- **仪表 / 进度轨道** — 相同色阶轨道。

## 第 2 层 — 完善工具包
- **面积图**（堆叠，带边 = 线）· **迷你图** · **热力图**
- **标尺图例**（顺序 / 发散）· **图表筛选器 / 时间范围** · **空状态**

## 系统层 — 成为本技能
- **六项检查验证器** — `scripts/validate_palette.js`（调色板验证）。
- **主题引擎** — 将客户色阶对齐到通过的值（color-formula.md）。
- **图表类型启发式** — 选择形式（choosing-a-form.md）。
- **表格视图生成器** — 任何图表的 WCAG-clean 等价物。

注意：部分到整体依赖于堆叠条形图；环形图保持降优先级。小倍数是这些之上的布局模式，不是单独的部件。如果散点密集的表面出现，散点图加入第 2 层。
