一张图只讲一句话：vibe 项目的图表选型与诚实坐标轴实战

以下示例中的人物与产品均为虚构。

先说判断：图表不是装饰，是结论的形状

很多 vibe 项目的图表页都有一个共同毛病：图很多，结论一个都没有。打开页面，折线、柱状、饼图、仪表盘摆满一屏，用户看完只记得颜色很花，不知道这个月到底是赚了还是亏了，哪个渠道值得加钱，哪个环节正在漏水。图做得越花，责任推得越干净：反正数据都摆出来了，看不懂是你自己的事。这不是数据可视化，这是把思考外包给用户。

我的判断很直接：一张图只许讲一句话。动手画图之前，先把这句话写出来，写在纸上，写成主谓宾齐全的句子。比如“本周老客复购贡献了六成新增订单”，而不是“订单趋势”。前者可以检验对错，后者永远不会错，也永远没用。写不出这句话，就说明你还没想清楚要表达什么，这时候不应该打开图表库，而应该回去看数据表。

划界先说清楚，避免和站内已发指南重复：仪表盘设计指南讲的是一个页面上放哪些卡片、按什么优先级排布；数据表格指南讲的是表格的排序、筛选和分页；本文不重复这两点，只讲单个图表内部怎么做选择：什么数据配什么图、坐标轴怎么画才不骗人、颜色和标注怎么写才不用猜。本文也不讲数据怎么采集和清洗，那是上游的事。

虚构示例贯穿全文：花店店主苏青开了一家线上花店“林间小铺”，用 AI 搭了一个看板，想知道每周该进多少货。所有数字都是编的，只用来讲方法。

第一步：用四个问题定图型，别用颜值定

选图型不需要审美，需要分类。拿到一组数据，先问四个问题，答案会把图型范围缩到很小。

第一，比较还是构成？比较不同类别的大小，用柱状图。苏青想比较五个花材品类的周销量，柱状图一出，高低立见。构成是看整体由哪些部分组成、占比多少，比如订单来自老客、新客、团购各占几成，类别少于五个可以用饼图或环形图，超过五个就别用饼图，扇形挤在一起谁也看不清，改用横向条形图按大小排序。

第二，有没有时间？凡是带时间的序列，默认用折线图。时间是最自然的横轴，折线能同时交代趋势和波动。不要把时间序列画成柱状图，除非你要强调某一天的绝对值特别突出。苏青看十二周的销量走势，折线一眼能看到第三周断崖和第八周反弹；换成柱状图，趋势还在，但波动会被一根根柱子切碎。

第三，看分布还是看关系？一堆数值的分布，比如客单价都落在哪个区间，用直方图。两个变量之间有没有关系，比如花束单价和复购率是否同向变化，用散点图。分布和关系是新手最容易画错的两类：把分布画成折线，会让人误以为相邻区间有先后关系；把关系画成柱状，会把连续变量切成假类别。

第四，数据有多少？类别超过十个，任何图都会挤。先聚合再画图：只留前五名，剩下的并成“其他”，或者按业务含义合并成大类。点数超过几千，散点图会糊成一片，先分桶聚合或抽样，再画。图型选错可以换，数据不聚合就硬画，换什么图都没用。

一张速查表可以贴在工位上：比较用柱状图，趋势用折线图，构成用条形图或环形图，分布用直方图，关系用散点图。超出这张表的图型，比如雷达图、漏斗图、旭日图，都有各自成立的场景，但一个人团队的第一版看板用不上。先把五种基本图画对，再谈花样。

第二步：坐标轴是诚实线，动它就是改结论

图表最容易骗人的地方不是颜色，是坐标轴。同一组数据，改一下起点，结论可以完全反过来。苏青的周销量从九十八单涨到一百零二单，涨幅只有百分之四；如果把纵轴起点截到九十，柱子高度差会被放大好几倍，看起来像翻了一番。这不是“为了好看”，这是改写事实。我的规矩是：柱状图的纵轴必须从零开始，没有例外。折线图如果确实要放大波动看趋势，可以截断起点，但必须在图上明明白白标出截断，并且在标题里写清“纵轴从九十起”，不能让读者自己去发现。

双轴是第二个大坑。左右各一个刻度、两条线各走各的量纲，视觉上两条线一交叉就显得“相关”，实际上可能只是刻度凑巧。一个人团队的看板不要用双轴。两个量纲不同的指标要对比，办法有两个：要么拆成两张小图上下并排，要么把其中一个换算成指数或增长率，让两者回到同一量纲。拆图看起来笨，但笨得诚实。

第三个坑是时间轴不均匀。缺了某周的数据，直接把前后两周连起来，等于假装那一周不存在。正确做法是把缺失标出来：断点、虚线、灰色缺口，任何一种都行，但不能悄悄连上。同样，横轴如果是月份，就不要混进“季度合计”这种不同粒度的数据点，一张图只许一种粒度。

还有一个常被忽略的细节：刻度单位要写在轴上，不要只写在图例或脚注里。“金额”到底是元还是万元，差一万倍；“用户数”是累计还是新增，结论完全不同。轴标题写全量纲，是成本最低的诚实。

第三步：颜色和标注是给读者省时间，不是给页面上妆

AI 生成的图表最常见的毛病是颜色太多。一张图七八种颜色，每种颜色还要配图例，读者先要花半分钟破译颜色密码，才能开始看数据。规矩是：一张图最多三个有含义的颜色。主色讲主角，灰色讲背景，一个强调色讲需要关注的异常或结论。苏青的销量图里，正常周用灰色，创下新高的那一周用一个亮色，读者第一眼就知道该看哪里。

颜色还不能只靠颜色本身传达信息。红绿对比在色盲用户眼里可能完全一样，红绿色块加文字标注才保险。做法是：凡是用颜色区分的类别，同时用文字、形状或位置再区分一次。折线图里不同系列用实线、虚线、点线区分；柱状图里直接在柱子上标数值。直接标数值是最被低估的做法：读者不用在图例和柱子之间来回对，就能读出准确数字。

标注要写在数据旁边，不要堆在图例里。图例是不得已才用的东西：系列超过三个、颜色实在不够用的时候才请图例出场。系列只有一两个，直接在图线末尾写名字。标题也要改：不要写“销量统计”这种名词，要写结论句，比如“老客复购撑起了本周销量”。标题写结论，副标题写口径和时间范围，比如“口径：已付款订单；时间：十月第一周至第四周”。口径写进图里，比写进文档里有用十倍，因为截图流传出去的时候，文档不会跟着走。

第四步：交互只做三件，剩下的交给表格

交互式图表很容易做过头：缩放、平移、钻取、联动、动画全上，用户点来点去，最后还是不知道结论。一个人团队的图表交互只做三件就够了。第一是悬停看准确值，鼠标停在数据点上显示具体数字和日期，解决“大概多高”的问题。第二是筛选，允许按品类、时间范围切分，解决“只看某类”的问题。第三是下钻，从月钻到周、从品类钻到单品，但最多钻一层，钻两层以上用户就忘了自己从哪来的。

超出这三件的需求，不要再往图上堆功能，改成给一张表格。表格是图表最好的兜底：图讲趋势和对比，表给精确值和明细。每一张重要图表下面，都应该能一键看到对应的数据表，或者至少能导出数据。用户要核对数字的时候，表格比任何交互都快。这个做法还有一个好处：图表的无障碍替代文本可以直接用表格，不用再为读屏用户单独写一套描述。

大数据量也要先聚合再渲染。几万个点直接画进浏览器，页面卡死不说，图本身也糊。按时间分桶求和或求均值，点数压到几百个以内再画；散点图超过两千个点就改用热力图或分桶计数。性能问题在图表上从来不是“优化一下渲染”的事，而是“先想清楚读者需要多细”的事。

第五步：给 AI 的提图需求怎么写，才不会返工三次

vibe 项目的图表大多是 AI 生成的，返工的原因往往不是 AI 画得丑，而是需求写得含糊。“给我画个好看的销量图”这种需求，AI 只能猜。合格的需求要包含五句话：结论句、数据字段、图型、口径、反模式。比如：“结论是老客复购撑起本周销量；字段是订单日期、客户类型、订单金额；用按周聚合的堆叠柱状图；口径是已付款订单；不要用饼图、不要用双轴、纵轴从零开始。”五句话写全，AI 第一次出图就能用；缺了口径和反模式，返工三次是常态。

验收也别只看截图好看不好看，按一张清单逐项打勾：结论句能不能从图上直接读出来；纵轴是不是从零开始或已标注截断；颜色有没有超过三种；关键数字有没有直接标注；口径和时间范围有没有写进图里；手机上打开会不会挤成一团；对应的数据表能不能一键看到。七项全过才能上线，任何一项不过都值得改一版。图表上线后也值得回访：一个月后问问自己，这张图有没有改变过任何一次决策。如果一张图从来没有影响过决策，它就不是看板的一部分，是装饰，删掉它，页面会更干净。

第六步：图到了手机上还成立吗

图表在电脑上成立，不等于在手机上成立。手机屏幕窄，图例、长轴标签、多系列折线一上去就挤成一团。我的做法是：先按手机宽度验图，再按电脑宽度验图。顺序不能反，因为把电脑图缩小是最常见的偷懒，而缩小之后字看不清、线分不开，用户只能靠猜。手机上要过三关：第一，横轴标签不能重叠，标签太长就倾斜、缩写或隔几个显示一个，宁可少标几个刻度，也不要让字叠在一起；第二，多系列折线超过三条，手机上默认只显示最重要的两条，剩下的收进筛选里让用户自己加回来；第三，悬停在手机上不存在，手机端要把关键数值直接标在图上，或者点一下数据点才弹出数值，绝不能假设用户有鼠标。

图表库的取舍也要按这个标准来。一个人团队不需要功能最全的库，需要默认值最诚实的库。选库之前先问四个问题：默认纵轴是不是从零开始；默认颜色是不是色盲友好；默认字体在中文环境下会不会糊；导出图片时标题和口径会不会跟着走。四个问题有一个答案是否定的，就换一个库，或者把默认值改掉再上线。库的文档写得再漂亮，默认值不诚实，上线后每一张图都要靠人工检查兜底，成本全在后面。

还有一类图值得单独提醒：实时更新的图。数据每秒都在变，折线不停往右爬，看起来很高级，但读者根本读不出结论。实时图只适合一种场景：值一旦越线就要立刻有人处理，比如服务器负载、库存告警。除此之外，实时刷新都是噪音。正确做法是默认显示聚合后的静态图，实时只作为可选项，或者把刷新间隔拉长到分钟级。图会动不等于图有用，动得越频繁，读者越难把它当成决策依据。

顺带补一个经常被忽略的环节：图表导出的口径。很多团队的图表在页面上是对的，截图发出去就错了，因为标题里的结论还在，副标题里的口径和时间范围被裁掉了。导出的图片必须自带完整信息：标题写结论，副标题写口径、时间范围和数据来源，页脚写生成日期。做不到这一点的导出功能，不如不提供导出，至少用户在页面里看到的是完整版本。同样，图表分享到群聊或文档里之后，读者无法点开交互、无法查看数据表，所以静态版本的信息密度必须比交互版本更高，而不是更低。把导出当成图表的第二次发布来验收，截图流传出去之后仍然站得住，这张图才算真正完成。还有一条验收时最容易漏掉的检查：同一张图在浅色背景和深色背景下各看一遍，灰色文字在深色底上可能直接消失，强调色在浅色底上可能刺眼到无法直视，两种背景都通过才算过关。

最后说一句反直觉的话：图表的最高境界是让人少看图。一个团队真正成熟的标志，不是看板上有多少张图，而是每个人打开看板三十秒内就能说出今天该干什么。图是手段，决策是目的。凡是不能帮人更快决策的图，不管画得多漂亮，都是成本。

上线检查表

• 每张图都有一句主谓宾齐全的结论句，写在标题里。
• 图型按比较、趋势、构成、分布、关系五类选，类别超十个先聚合。
• 柱状图纵轴从零开始；折线截断起点必须在图上标注。
• 不用双轴；不同量纲拆成两张小图或换算成同一量纲。
• 颜色不超过三种有含义的颜色，颜色之外再用文字或线型区分。
• 关键数字直接标注在数据旁，口径和时间范围写进图里。
• 交互只做悬停数值、筛选、单层下钻；精确值交给数据表。
• 点数压到几百个以内再渲染；手机上打开不挤、不溢出。