一、一个「网站不好用」的题

新军队是一家卖户外装备的网店。掌门人的原话是：网站做得不好，来的人不少，买的人不多，你看着办。 这句话里有三个可以动的方向：让更多人来、让来的人多买、让买的人多买几件。 哪个方向值得投钱，光听这句话听不出来。得先把「不好用」翻译成能算的数。

翻译这一步没法跳。跳过翻译直接画图，画出来的图一定是在替自己的猜测找证据。

二、前一位设计师交的三份图

第一份是饼图：六个城市的销量占比。六个扇形差不多大，看着很均衡。 第二份是条形图：六个月的订单量，从 420 涨到 700，涨了 66.7%，看着稳步上升。 第三份是双轴折线：转化率一根轴、客单价另一根轴，两条线画在同一张图上，看着挺专业。

三份都做得规整，配色也讲究。 掌门人看了一眼就退了回来，理由说不出专业，但是对的：这图我看完了，还是不知道该改哪儿。

三、三份图各自缺了哪个变量

注意缺的那一列，缺的全是「分母」或者「第二个变量」，不是缺美观。 一张图能回答的问题，由它装进去的变量决定，跟画得好不好看无关。

四、出局的理由不是难看

这三份图有个共同点：它们都在描述现状，没有一份在支持决定。 描述现状的图有它的用处——汇报进度、说明规模。但掌门人要的是「下一步做什么」。 判断一张图有没有用，最快的办法是问一句：看完这张图，我会做一件跟没看之前不一样的事吗？

如果答案是不会，这张图就是装饰。装饰不丢人，但不能拿去换预算。

五、接手时先问的三句话

第一句：这张图要让谁看？掌门人、运营、还是设计师自己？三种人关心的数不一样。 第二句：要比较哪两个东西？城市跟城市、月份跟月份、改版前后。 没有比较对象的图，读起来只能「哦」一声。 第三句：比出来之后要做什么决定？投钱、改版、还是继续观察。答不出这句，说明还没到画图的时候。

这三句问完，图长什么样基本就定了——剩下的是手艺问题，不是判断题。

六、动手 Demo：三份信息图，各自丢了什么

把三份图真的画出来，存成 PNG，再把每份图缺的变量列出来。 图里的字一律用英文：这台机器没装中文字体，写中文会变成一排方框。

import os
import matplotlib
matplotlib.use("Agg")
import matplotlib.pyplot as plt

CITY = [("北京", 3.4, 268.0), ("上海", 3.9, 292.0), ("广州", 2.8, 241.0),
        ("成都", 4.6, 205.0), ("杭州", 4.1, 255.0), ("西安", 5.2, 188.0)]
ORDER = [420, 470, 505, 610, 640, 700]

def save(name, draw):
    fig, ax = plt.subplots(figsize=(5.0, 3.2), dpi=110)
    draw(ax)
    fig.tight_layout()
    fig.savefig(name)
    plt.close(fig)
    print("%s 存成 %d 字节" % (name, os.path.getsize(name)))

def pie(ax):                      # ① 只有占比
    ax.pie([c[1] for c in CITY], labels=["c%d" % (i + 1) for i in range(6)],
           autopct="%1.0f%%", textprops={"fontsize": 7})
    ax.set_title("share by city (conversion rate)", fontsize=8)

def bar(ax):                      # ② 只有订单量
    ax.bar(range(6), ORDER, color="#7f9fd0")
    ax.set_xticks(range(6))
    ax.set_xticklabels(["m%d" % (i + 1) for i in range(6)], fontsize=7)
    ax.set_title("orders per month", fontsize=8)

def two_axes(ax):                 # ③ 两个单位共用一张图
    xs = list(range(6))
    ax.plot(xs, [c[1] for c in CITY], "o-", lw=1.2)
    ax.twinx().plot(xs, [c[2] for c in CITY], "s--", lw=1.2)
    ax.set_xticks(xs)
    ax.set_xticklabels(["c%d" % (i + 1) for i in xs], fontsize=7)
    ax.set_title("two units on two axes", fontsize=8)

for nm, fn in (("pie.png", pie), ("bar.png", bar), ("line.png", two_axes)):
    save(nm, fn)

print()
print("饼图丢了：绝对值、转化率、客单价")
print("条形图丢了：访客数——订单涨可能只是人来得多了")
print("双轴折线丢了：两根轴单位不同，两条线交叉没有意义")

实跑输出：

--------------------------------------------------------------------
三份信息图，各自丢了什么
--------------------------------------------------------------------

  ① 新军队要优化网站
  --------------------------------------------------------------------
  新军队（New Army）是一家卖户外装备的网店。
  前一位信息设计师交了三份图：一张饼图、一张条形图、一张折线图。
  三份都能看，但只有一份能回答「该改哪里」。

  ② 第一份：饼图，销量按城市
  --------------------------------------------------------------------
  六个城市的销量占比画成饼图。看着很均衡，六个扇形差不多大。
  可它丢掉了两件事：每个城市卖了多少（绝对值），以及转化率是多少。
  图存成 PNG：19037 字节

  ③ 第二份：条形图，六个月订单量
  --------------------------------------------------------------------
  订单从 420 涨到 700，涨了 67%。看着是稳步上升。
  可它丢掉了访客数——订单涨，可能只是因为访客涨。
  图存成 PNG：9737 字节

  ④ 第三份：折线图，转化率与客单价
  --------------------------------------------------------------------
  两条折线画在一张图上，看着挺专业。
  可两条线的单位不一样（% 和元），共用一根 y 轴，读起来会互相误导。
  图存成 PNG：28915 字节

  ⑤ 三份图各自能回答什么
  --------------------------------------------------------------------

| 图 | 能回答 | 回答不了 |
|---|---|---|
| 饼图 | 谁占比大 | 谁值得投钱（缺转化率与客单价） |
| 条形图 | 订单在涨 | 涨是因为访客涨还是转化涨 |
| 双轴折线 | 两个指标各自怎么动 | 它们之间有没有关系 |

  ! 三份图都没错，但它们回答的都不是「该改哪里」。

三份图的字节数分别是 19037、9737、28915。 字节数不是数据，它只说明这张图画了多少东西——图越复杂，文件越大，跟结论对不对没有一点关系。 饼图那张甚至把「转化率」写进了标题，却一个数都没画上去。这是最典型的「标题在替图吹牛」。

30 秒实验

1. 给饼图加一列转化率，画成「城市 × 两个指标」的图，先别管好不好看， 只问它能不能回答「该给谁加预算」。
2. 把条形图的纵轴换成「订单除以访客」，形状会变成什么样？先猜，再画。
3. 想一想：如果掌门人只允许你交一张图，你交哪张？为什么。

常见误区

1. 把「好看」当验收标准：配色、阴影、立体效果都能让图更好看，但没有一样能让它多回答一个问题。
2. 一张图塞两个单位：转化率（%）和客单价（元）共用一根 y 轴，两条线的交叉点纯属巧合。
3. 只画总量不画分母：订单从 420 涨到 700 很漂亮，访客从 1.2 万涨到 1.82 万同样漂亮。
4. 先画图再想问题：手里有什么数就画什么图，画完再编一个结论配上去，这是最常见的一种自欺。

三份图缺的都是变量。下一篇就把「一张图里到底装了几个数」这件事掰开看。

• ☐ （本篇完，下一篇 4.2 图形里藏着哪些数据）

相关笔记

• 图形里藏着哪些数据
• 数据多不是问题
• 浴盆玩具与约束条件
• 📈 深入浅出数据分析 · 索引