---
name: chart-picker
description: 把表格、Excel、CSV 或一堆数字做成好看的图表或数据看板时使用。先读懂每组数据想说什么，再给每组配最合适的形状（半环仪表、节点圆点、日历热力图、桑基图、矩形树图、漏斗图、迷你走势图、子弹图、哑铃图、瀑布图、分段条、横向排行条等），最后统一外观。只要用户提到做图表、数据可视化、报表、看板、仪表盘、周报月报配图、"图表太丑"、"让这张表好看一点"，哪怕没说要选型，也要用它。
---

# 图表选型

这份说明可以当成一段文字发给任何 AI。把它和你的表格一起发过去，说一句"按这个做"就行。

AI 做图表最常见的毛病，是什么数据都画成折线图和柱状图。这两种图没有错，错在没有想过。图表好看靠两件事，顺序不能反：

1. 先看懂这组数据在说什么，再选最合适的形状。
2. 形状对了，再统一外观。

配色救不了选错的形状，所以不要一上来就调颜色。

## 开工前的两条底线

**数据只留在这里。** 用户的表可能是公司数据。不调用任何在线图表或图片服务，不把数据拼进网址，不引用外部的脚本、样式、字体和图片。成品是一个双击就能打开的 `.html` 文件，图用 SVG 画，代码和数据全写在文件里。没有办法生成文件时，就给出完整代码，让用户存成 `.html`。

**不改数，不编数。** 图上每个数字都要能在原表里找到，或者能由原表算出来。表里有对不上的地方，先告诉用户，不要悄悄修。

## 第一步：看懂

先不画图。把表拆成几组数据。一组可以是一列，也可以是几列合起来才说得清一件事，比如"实际 + 目标""上月 + 本月""来源 + 去向"。

给每组写一句"这组数据想说的话"，要用表里的真实数字，写成一句人话：

- 差：`订单数据`
- 好：`这个月目标 120 万，已经做到 87.6 万，还差 27%`

写不出这句话，说明还没看懂，回去再看一遍，或者问用户。写出来发现没什么可说的，这组就不上图。编号、备注、明细这些本来就不用上图。

写这句话时顺手数清楚五件事，形状几乎就定了：

- 一共几项？
- 项和项之间有没有先后顺序？
- 加起来是不是一个整体？
- 有没有目标值？
- 是不是时间？有多少个时间点？

## 第二步：配形状

按"想说的话"对号入座。"认准条件"不满足就不要硬用，往下找。

| 这组数据想说 | 用这个 | 认准条件 | 不要用 | 为什么 |
| --- | --- | --- | --- | --- |
| 目标完成了多少 | **半环仪表** | 一个数对一个目标 | 饼图、环形图 | 饼图是在比两块谁大，这里要看的是走到哪了。半环像仪表盘，大数字放中间，一眼看完 |
| 走到了哪一步 | **节点圆点** | 3 到 7 个有先后的阶段 | 进度条 | 阶段是一格一格的，不是连续的百分比。进度条的 60% 看不出是第几步，圆点能直接数 |
| 每天活跃不活跃 | **日历热力图** | 三周以上的每日数据 | 几十个点的折线 | 一格一天，颜色越深数值越高，周末规律和断档一眼能看到 |
| 从哪来，到哪去 | **桑基图** | 有"来源到去向"的对应，两边总量相等 | 两张饼图 | 带子的宽度就是数量，来龙去脉一张图说完 |
| 分类很多，各占多少 | **矩形树图** | 6 类以上，加起来是整体 | 饼图 | 分类一多饼图就乱了，方块能放下所有名字 |
| 用户在哪一步流失 | **漏斗图** | 有先后的步骤，数量一路减少 | 柱状图 | 一层比一层窄，流失就在眼前。每层标转化率 |
| 只想看涨跌 | **迷你走势图** | 贴在一个数字旁边 | 单独画一张大折线图 | 没有坐标轴的小线，不占地方，看板最省空间的走势 |
| 好几项各差目标多少 | **子弹图** | 两项以上，每项都有目标 | 分组柱状图 | 一根横条加一条目标线，够没够得着一眼看出 |
| 这个月比上个月 | **哑铃图** | 只有两个时间点或两种状态，比较多项 | 分组柱状图 | 两点一线，线越长变化越大，方向也看得见 |
| 怎么从 A 变成 B | **瀑布图** | 一个起点，一串加减，一个结果 | 普通柱状图 | 一段段往上加、往下减，钱去哪了看得清 |
| 由哪几部分组成 | **分段条** | 2 到 5 项，加起来是整体 | 饼图 | 同一根横条上比长短，比饼图比角度准，也省地方 |
| 谁排第一 | **横向排行条** | 项和项互相独立，比大小 | 竖柱状图 | 从长到短排好，名字再长也放得下 |

这几种不在上面，但也常用：

| 这组数据想说 | 用这个 |
| --- | --- |
| 就一个重要数字 | **大数字**，旁边写涨跌。不要画只有一根柱子的图 |
| 很长一段时间的走势，主角是趋势和拐点（12 个点以上） | **折线图**，这时候它就是最对的，不要为了花哨换掉。一条线下面加一层淡淡的面积 |
| 几条走势要比 | **同样的小折线并排放**，不要全挤在一张图里 |
| 很多个体的数值怎么分布 | **直方图** |
| 两个指标有没有关系 | **散点图** |
| 两个维度交叉，比如星期和小时 | **格子热力图** |

容易混的几对：

- 一个数对目标用半环仪表，好几项对目标用子弹图。
- 五项以内用分段条，六项以上用矩形树图。
- 步骤有先后用漏斗图，互相独立用横向排行条。
- 关心结果还剩多少用瀑布图，关心每一笔去了哪用桑基图。
- 只有两个时间点用哑铃图，三个以上用折线图或迷你走势图。

选形状时记住三点：

- 看板上同一种形状不超过两张。数据真的都一样时，可以把几张合成一张。
- 形状服务内容，不是为了花哨。条件不满足时，朴素的图才是对的。数据只有两三个数，就别上桑基图。
- 用户已经点名要某种图，就照做。觉得不合适时，做完多说一句建议。

## 第三步：统一外观

形状选好了，外观收三下。这三下是一起生效的，少一样看板就散了。

1. **一个主色，从深到浅。** 所有图共用一个主色，靠深浅区分项目，最重要的最醒目。别用彩虹色。只有一个例外：增和减、涨和跌这种相反的意思，可以再加一个对比色。用户有品牌色就用品牌色。
2. **去掉网格线和多余的坐标轴。** 能直接写数字，就不需要刻度。只留有用的数字。
3. **数字写在图上，去掉图例。** 名字和数值直接贴着图形写，眼睛不用来回找。

再加四个让看板像样的细节：

- 标题写结论，不写名称。写"转化主要掉在注册这一步"，不写"转化漏斗"。
- 所有卡片同样的圆角、内边距和间距，排成整齐的网格，放最重要的那张最大。卡片高度跟着内容走，不要留大片空白。
- 文字只用三级：大数字、正文、小字说明。字都用灰阶，颜色留给图形。
- 图形线条细一点，圆角小一点，留白多一点。粗黑框和大色块最显廉价。

用户没指定时，用这套默认配色。主色从深到浅依次是 `#0F5C4F`、`#1F8A73`、`#4FB39B`、`#93D3C2`、`#D3EDE5`。页面底色 `#F5F6F3`，卡片 `#FFFFFF`，字 `#1C2321`，次要字 `#6B7471`，对比色 `#D9694A`。字体写系统字体：`-apple-system, "PingFang SC", "Microsoft YaHei", sans-serif`，不要外部字体。

## 每种图怎么画

都用 SVG，尺寸和数值用代码按数据算，不要手写坐标。

- **半环仪表：** 画两层同样的半圆弧，粗 16 到 24，圆头。底层是最浅的主色，上层用 `pathLength="100"` 和 `stroke-dasharray` 按完成率露出。大数字放在圆心，下面一行小字写"已完成 / 目标"。
- **节点圆点：** 一排等距的圆，用细线连起来。做完的实心，当前这个实心再加一圈外环，没到的只留空心，下面写阶段名。
- **日历热力图：** 一列一周，一行星期几。格子圆角 3，留 3 的缝。按数值分 5 档，用主色的五个深浅。没有数据的日子留空。
- **桑基图：** 左右两列节点，高度按数值堆起来，节点之间留缝。带子用三次贝塞尔曲线画，粗细等于数值，透明度 0.35 到 0.5。两边总量必须相等，不等时补一个"其他"，并告诉用户。表里只有来源和去向两张单子，没写哪笔钱去了哪，就在中间加一个总数节点，不要自己编对应关系。
- **矩形树图：** 用 squarify 算法切，面积和数值成正比，切完按数值从深到浅上色，格子留 2 的缝。字放得下才写在格子里。
- **漏斗图：** 居中的横条，宽度和数量成正比，一层比一层窄。层与层之间写转化率，流失最大的那一层用对比色点出来。
- **迷你走势图：** 一条细线，没有坐标轴，最后一个点画小圆点，旁边写当前数字和涨跌。
- **子弹图：** 浅色长条是满量程，深色短条是实际，一条竖线是目标。数字写在最右边。
- **哑铃图：** 每项一行，浅色点是之前，深色点是现在，中间连线。按变化大小排序。刻度不用从 0 开始，收紧到这组数据的范围，不然两个点挤在一起，看不出变化。各项大小差得太远，收紧了还是挤，就改画涨跌的百分比。
- **瀑布图：** 每根柱子从上一根结束的地方开始。头尾是总数，用主色。增和减用两种颜色，每根写上数字，相邻的柱子用细线连上。
- **分段条：** 一根横条，段与段之间留 2 的缝，从深到浅。段内写名字和百分比，放不下就写到段的下方。
- **横向排行条：** 从高到低排，名字在左，数字在条尾。第一名用主色，其他用浅一档。

## 交付

按这个顺序给用户：

1. **选型表**，一组一行：

   | 数据 | 这组数据想说的话 | 选的形状 | 为什么 |
   | --- | --- | --- | --- |

2. **成品文件**，一个 `.html`，打开就是整块看板。
3. **一句话说明：** 哪些列没上图，表里有什么对不上的地方。

交之前逐条核对，这一步很省返工：

- 每个数字都和原表一致，该加总的地方加得上。分段条加起来 100%，桑基图两边相等，瀑布图的结果等于起点加减之后的数。
- 不是清一色的折线图和柱状图，也没有为了花哨硬用的形状。
- 全部只有一个主色。没有网格线，没有图例。
- 文件里没有 `http` 开头的外部地址。
- 字没有重叠，没有超出卡片。能看图的话，亲眼看一遍。

用户用什么语言提问，就用什么语言写图上的字和说明。