chart

---
name: chart
description: Generate a hand-drawn-style Excalidraw bar, line, 100% stacked bar or pie chart from code and export to .excalidraw / SVG / PNG / WebP — no browser. For simple category comparisons, trends and part-to-whole shares — quarterly revenue, signups by channel, DAU over months, traffic by source, the makeup of each group — vertical or horizontal bars, up to three series with a legend, labelled values, tick grid; pie slices and stacked segments labelled with their percentages, small ones moved outside on a leader. Not for dual axes or absolute-value stacked bars. Triggers on draw a bar chart / line chart / column chart / trend chart / pie chart / stacked bar / percentage breakdown / compare values. 中文触发词：柱状图 / 折线图 / 条形图 / 趋势图 / 饼图 / 堆叠柱 / 占比 / 构成 / 数据对比 / 营收对比 / 增长曲线。
allowed-tools: mcp__excalidrawer__render_diagram, mcp__excalidrawer__compute_layout, Bash(npx -y -p excalidrawer*:*), Read, Write(./*.json), AskUserQuestion
---

# excalidrawer chart

图表讲数字之间的大小、走向和构成：柱状图比几个类别谁大谁小，折线图看一个量随时间涨还是跌，饼图看一个整体分成哪几块，100% 堆叠柱看几组各自的构成有什么不同。读者应该一眼看出最大的、最小的、变化的方向，数值再靠图上写的数字读准。这里只做简单的类别对比和趋势，不是通用图表工具。下面四步走：问清楚、构图、出图、对照常见画坏法检查。

## 1. 问清楚

用户的描述已经能列全这张图的全部内容（类别或时间点，以及每个系列在每一格上的数）就不问，也不去读提问规则；柱状还是折线，数据是类别还是时间一般能直接推出来。只有单位和轴标题没说，或者柱状还是折线真的两种都说得通时，才要问。否则先看提问的通用规则：调 skill `steps`（Claude Code 用 Skill 工具调 `excalidrawer:steps`；其他宿主读 `../steps/SKILL.md`），看它的『clarify』。这一步只读这一节。

要问的事：

1. **内容**：自由文本。类别或时间点有哪些，每个系列在每一格上的数是多少。用户给的是一张表、一段 CSV 或一段代码里的数组时，直接从里面读，不再问。
2. **哪种图**：数据是类别（渠道、城市、季度之间比大小）就是柱状，数据是时间（按月、按周的变化）就是折线；数据是一个整体的各部分占比（加起来是 100%）就是饼图；几组各自都有一套占比（每一组里各类占多少）就是 100% 堆叠柱。这样推，不问；用户点名了图种就照点名的画。两种都说得通才问，单选，把推荐项放第一位：同样是按季度的营收，用户要比各个季度谁高，用柱状；要看增长的走势，用折线。一组占比只有两三块、要比的是块和块之间差多少时，柱状比饼图读得准。
3. **单位和轴标题**：柱状和折线，用户没说就问：数值的单位是什么（美元、百万、百分比、千人），要不要给轴写标题。单位写进数值轴的标题。饼图和堆叠柱写的都是百分比，不问；小数位跟着用户给的数，给的是整数就写整数。

柱状和折线超过三个系列时，不要硬塞进一张图：问用户留哪三个，或者拆成两张。饼图和堆叠柱的类别超过六个时，问用户把哪些小的并成「其他」。

导出格式不用先问：对话里读得出图要去哪就直接定，读不出来才在出图时问一句（规则在 `steps` 的『出图』里）。

## 2. 构图

组件的用法：调 skill `steps`（Claude Code 用 Skill 工具调 `excalidrawer:steps`；其他宿主读 `../steps/SKILL.md`），看它的『组件』。这一步只读这一节，再读下面用到的那几份参考：柱状、折线、堆叠柱读 axis（图表坐标轴一节写了两条轴、柱子、折线、网格、堆叠分段怎么画）、形状与文字（垫在形状下面的线的写法在里面）、legend；饼图读 pie 和形状与文字（多边形一节）；都读 semantics。不需要 stack、panel、连线。

柱状、折线、堆叠柱没有专门的图表组件：数值轴和类别（时间）轴各是一条 axis，柱子、分段、折线、圆点、网格线都用这两条轴给出的刻度和数值换算自己画。饼图用 pie 组件：它给出每一片的轮廓和标签放在哪。

### 柱状：类别沿横轴，柱子从零往上长

```text
 $M
 40 ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄
 30 ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ ▇ 27.5
 20 ┄┄┄┄┄ ▇ ┄ ▇ ┄┄┄┄ ▇ ┄ ▇
 10 ┄┄ ▇ ┄ ▇ ┄ ▇ ┄ ▇ ┄ ▇
  0 ━━━━━━━━━━━━━━━━━━━━━━━
        Q1    Q2    Q3    Q4
```

- 数值轴向上，下限是 0：柱子的高度必须和数值成正比，所以柱状图的数值轴永远从 0 开始，不为了"看清差别"截掉下面一段。想看细微的变化，那是折线图的活。
- 每根柱子的底边就是基线，柱顶写数值。柱顶的数值用同一套换算算出来，不另外手写位置。
- **多系列**：同一个类别的几根柱子并排紧贴，整组居中在类别的下方；系列用不同的颜色（蓝、橙、紫的顺序），最多 3 个，配 legend。
- **类别没有天然顺序**（渠道、城市、产品）时，按数值从大到小排，读者一眼看出排名；多系列时，按同一类别各系列数值的合计排，不单看某一个系列。类别是时间或有固定次序（Q1 到 Q4、周一到周日）时，按它本来的顺序。
- **横过来**：类别名平均超过 8 个字符，或类别超过 8 个时，类别沿竖轴往下排，柱子向右长。数值轴挪到下方，网格线变成竖的，数值写在柱子右端的外面；轴左边留出最长类别名的位置。

### 折线：时间沿横轴，数值轴从一个整齐的刻度起

```text
 90 ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ ●─ 88
 70 ┄┄┄┄┄┄┄┄ ●──●╱ ┄┄┄┄
 50 ┄ ●──●──●╱ ┄┄┄┄┄┄┄┄
 30 ━━━━━━━━━━━━━━━━━━━━
      Jan Feb Mar Apr May
```

- 数值轴不强求从 0：折线看的是走势，范围取数据附近、起点落在一个整齐的刻度上（比如 30 或 40），让线占满图的大部分高度。
- 每个数据点一个小圆点，点和点之间连线；线垫在圆点下面，不从圆点上穿过去。只在最后一个点的右边写数值，中间的点不写，免得图变成一排数字。
- 最多 3 条线，不同颜色（蓝、橙、紫的顺序），线和圆点同色，配 legend。时间点超过 12 个就读不清了，换成更粗的时间粒度。
- 某个时间点没有数据，这一点不画，线在那里断开，不拿零补。

### 100% 堆叠柱：每根柱一样高，按类别分段往上摞

```text
 100% ┄┄ ▒▒ ─ 3.1% ┄ ░░ ┄┄┄┄┄ ▓▓ ┄┄
  75% ┄┄ ██ ┄┄┄┄┄┄┄┄┄ ░░ ┄┄┄┄┄ ▓▓ ┄┄
  50% ┄┄ ██ ┄┄┄┄┄┄┄┄┄ ▒▒ ┄┄┄┄┄ ▒▒ ┄┄
  25% ┄┄ ██ 96.9% ┄┄┄ ▒▒ ┄┄┄┄┄ ▒▒ ┄┄
   0% ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
        Q1          Q2        Q3
```

- 每根柱都是 100%：看的是每一组里各部分各占多少、这个构成从一组到下一组怎么变，不是各组的总量。各组的总量也要比时，不用这种图。
- 分段的顺序在每根柱里都一样，从基线往上按系列的顺序摞，图例的顺序和它一致。系列顺序有含义（先后、强弱）时按含义排，没有时按整体占比从大到小。
- 每段写自己的百分比，写在段的正中。**段太薄写不下数字时，数挪到柱子右边，拉一条短引线指回这一段，不省掉**：最小的那几段正是读者靠眼睛估不出来的。同一根柱上几段都外移时，上下错开不重叠。
- 用户给的百分比四舍五入后加起来不正好是 100 时，按这一根的总和换算，柱顶照样齐平，段上写的仍是用户给的数。占比为 0 的段不画。

### 饼图：一个整体切成几片，标签写在片上

```text
                  ╭────────────╮
   Trade-off ─────┤╲     Exp.  │
   10.9%          │ ╲    25.8% │
                  ├───●────────┤
                  │  Opinion   │
                  │   50.0%    │
                  ╰────────────╯
```

- 从 12 点钟方向开始，顺时针排。类别没有天然顺序时按占比从大到小排；和另一张堆叠柱共用一组类别时，按那张图的系列顺序和颜色，让读者能把颜色从一张带到另一张。
- 每片的标签是名称加百分比，写在片里。**片太小放不下时，标签外移到圆外，用一条引线指回这一片，不省掉。** 外移的标签在圆的左右两侧各排成一列，不互相压。
- 不配图例：名称直接写在片上，读者不用在图例和扇形之间来回对。
- 2–6 片最好读。超过六片，或好几片都很小，把小的并成「其他」，或者改用横着的柱状图。
- 不画环形、不把某一片拉出来、不加立体效果：这些都改变不了读数，只让面积更难比。

### 共用的

- **刻度**（柱状、折线、堆叠柱）：数值轴的刻度用 axis 给的整齐间隔，刻度文字放在数值轴左边。刻度不超过 7 个。
- **网格**（柱状、折线、堆叠柱）：每个刻度（基线除外）画一条浅灰的虚线，贯穿整个绘图区，垫在柱子和折线下面；它们不能用普通连线直接画，连线总是画在形状上面，会盖住柱子。垫在下面的写法在 `steps` 的形状参考里。
- **轴标题**：可选。数值轴的标题（带单位）放在轴顶上方、靠左；类别轴的标题放在类别文字下面。
- **legend**：柱状、折线多系列才画，堆叠柱总要画；放在绘图区右上角、图的外面，样本是和系列同色的色块。单系列和饼图不画。
- **配色**：同一个系列在整张图里始终一种颜色；柱状、折线一张图不超过 3 个系列色。饼图和堆叠柱每个类别一种浅色、色相分开（蓝、橙、紫、绿、灰的顺序），不用一个色系的深浅：深浅暗示类别之间有顺序。都不用红色（红色读作"坏"）。轴线、刻度文字、数值文字都是默认的墨色，引线用灰色。
- **标题**：点明这张图量的是什么、哪段时间，比如「Quarterly revenue, FY2025 vs FY2026」，不写「Chart」。

### 不做的

双纵轴、按绝对值堆叠的柱（各柱高度不同）、环形图、面积图、图里的交互：这一种图都不做。用户要的是这些时，直说做不了，给最近的替代：双纵轴拆成上下两张共用横轴的图，绝对值堆叠改成并排柱或 100% 堆叠柱，环形图改成饼图。

## 3. 出图

出图、命名、导出格式、两层质量关、迭代：调 skill `steps`（Claude Code 用 Skill 工具调 `excalidrawer:steps`；其他宿主读 `../steps/SKILL.md`），看它的『出图』。这一步只读这一节。图表的文件名用 chart-<name>。

质量关里多看一件事：用图上的刻度和网格线当尺子，量一下柱顶、末点、堆叠分段的位置和旁边写的数值对不对得上，对不上就是换算用错了。饼图和堆叠柱再数一遍：每一片、每一段都有自己的数，没有一个被省掉。

## 4. 常见画坏法

| 画坏了长什么样 | 为什么 | 回到哪一步改 |
|---|---|---|
| 柱子从图的顶上倒挂下来，或者数值大的反而短 | 数值轴用了向下的方向，零在上、大值在下 | 构图：axis，数值轴用向上的方向 |
| 柱顶的数值和柱子的高度对不上 | 柱子和数值各算各的，没有走同一个换算 | 构图：axis，柱高、柱顶位置都用数值轴给的换算 |
| 柱状图的柱子都差不多高，看不出差别，或差别被夸大 | 数值轴没从 0 开始 | 构图：柱状图数值轴从 0 起；要看细微变化改用折线 |
| 网格线盖在柱子或圆点上，柱子上有一道道虚线 | 网格线用了普通连线，它总画在形状上面 | 构图：网格线垫在下面，写法见形状参考 |
| 折线从圆点中间穿过，点像被串起来 | 折线也用了普通连线 | 构图：折线垫在圆点下面 |
| 刻度是 37、74、111 这样的怪数 | 数值轴的范围随手取了，没落在整齐的刻度上 | 构图：axis，范围的两端取整齐的数 |
| 类别名挤在一起或折成几行 | 类别名长或类别多，还画成竖柱 | 构图：类别平均超过 8 个字符或超过 8 个，改横着的柱状 |
| 柱顶数值互相挤在一起或压到邻居 | 多系列的柱子太窄 | 构图：减少系列，或类别多时改横着的柱状 |
| 末点的数值被画布右边缘切掉 | 折线最后一点右边没留写数值的位置 | 构图：绘图区右边留够位置 |
| 多条线或多组柱分不清谁是谁 | 没配 legend，或两个系列颜色太接近 | 构图：legend，系列色用蓝、橙、紫 |
| 超过三个系列，图成了一团 | 一张图装了太多 | 问清楚：留哪三个，或拆成两张 |
| 饼图或堆叠柱上小的那一片、那一段没有数 | 放不下就省掉了 | 构图：放不下的外移，加引线指回去 |
| 饼图外移的标签叠在一起，或引线穿过别的片 | 标签各自贴着自己那一片摆，没有用组件给的位置 | 构图：pie，标签和引线的位置都取组件返回的 |
| 堆叠柱的柱顶参差不齐，有的冒过 100% | 四舍五入的比例直接累加，总和不是 100 | 构图：按每根柱的总和换算再摞 |
| 饼图和旁边的堆叠柱同一个类别颜色不同 | 两张图各自配色 | 构图：两张图用同一套类别顺序和颜色 |
| 饼图上方的外移标签压到标题 | 按圆的位置留空，没按标签的范围 | 构图：pie，按组件返回的范围放 |
| 出图后质量关有警告，或看图有一条不过 | 前面某一步的几何没改对 | 出图：按警告和自检的结论改，回到对应的构图那一项 |