让数据自己开口说话

📊 选对图表类型

选图表的第一性问题不是"我想画什么",而是"我想表达什么关系"。 数据之间的关系类型是有限的——比较、趋势、占比、分布、相关、排名—— 每种关系都有最贴合的图表。先想清楚关系,再选图表,大多数"图表选错"的问题都会消失。

关系 → 图表决策表

下表覆盖了 90% 的业务场景,大多数情况下照着选即可:

一个纯 CSS 柱状图示例

很多时候你不需要引入图表库——尤其是只需比较几个数值时,一个 div + 高度百分比就够了, 更轻、更可控、对主题换肤也最友好。下面是一个对"本周阅读时长"做比较的极简柱状图:

对应的实现非常简洁,核心是用 height 百分比映射数值:

<!-- 结构:每根柱子是一个 flex 列,柱体用百分比高度 -->
<div class="bars">
  <div class="bar-col">
    <div class="bar bar--accent" style="height: 92%;"></div>
    <span class="bar-col__label">周三</span>
  </div>
  <!-- 其余柱子同理 -->
</div>

<!-- 样式:容器定高,柱子贴底对齐 -->
<style>
  .bars {
    display: flex;
    align-items: flex-end;   /* 关键:贴底对齐,高度差异才能体现数值 */
    gap: 14px;
    height: 160px;
    border-bottom: 2px solid var(--color-border);
  }
  .bar {
    width: 100%;
    max-width: 48px;
    background: var(--color-text-disabled);   /* 普通柱用灰 */
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  }
  .bar--accent { background: var(--color-primary); }  /* 重点柱用强调色 */
</style>

🔢 大数字突出法 · KPI 卡片

页面顶部的那几个关键数字——"10 万用户""99.9% 可用率""昨日 GMV ¥128 万"—— 是整页信息密度最高、最该被一眼抓住的地方。它们叫 KPI(Key Performance Indicator)卡片。 做好 KPI 卡片的关键不是加装饰,而是建立清晰的视觉层级,让数字成为绝对主角。

四条铁律

• 数字用大字号:至少 2xl(2rem)起步,核心 KPI 可到 3xl(2.75rem)。配等宽字体或 DIN 类数字字体,数字本身的可读性和"数据感"才出得来。
• 数字旁配一行小字说明:这是什么数据、口径是什么、统计周期。没有说明的数字是没有意义的。
• 趋势箭头点睛:↑12% 用成功色(绿),↓5% 用错误色(红)。但注意:不是所有"下降"都是坏事,成本下降是好事,这时配色逻辑要反转。
• 一行最多 3-4 个:人脑同时处理的对象上限是 4 个左右。再多就分组(如"增长""健康""收入"分三组),别一排铺十个。

对应实现,KPI 卡片本质是一个结构固定的卡片:

<div class="kpi-card">
  <div class="kpi-card__label">月活用户</div>
  <div class="kpi-card__value">102,480</div>
  <div class="kpi-card__trend kpi-card__trend--up">↑ 12.3%</div>
  <div class="kpi-card__note">环比上月</div>
</div>

<style>
  .kpi-card__value {
    font-family: var(--font-mono);          /* 等宽,数字对齐且专业 */
    font-size: var(--font-size-2xl);        /* 至少 2xl 起步 */
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-tight);
  }
  .kpi-card__label {
    font-size: var(--font-size-xs);         /* 标签刻意做小 */
    color: var(--color-text-muted);
    text-transform: uppercase;
  }
  .kpi-card__trend--up   { color: var(--color-success); }
  .kpi-card__trend--down { color: var(--color-error); }
</style>

🎨 图表配色规则

配色是图表专业度的分水岭。业余图表的标志是"彩虹色一通乱涂",专业图表的标志是 克制——大部分元素退到灰阶背景里,只让需要被看到的那一两个数据点跳出来。 下面四条规则覆盖了几乎所有场景。

规则一:一个图表最多 1 个强调色

默认所有数据系列用灰阶(浅灰到深灰),只有你想强调的那一条/那一根 用主色。这是"故事化数据"的基本手法:灰色是背景,主色是结论。 上文柱状图示例里,周三那根柱子被涂成主色,就是这个道理。

规则二:多系列用色盲友好色板

当确实需要多个可区分的颜色(多系列折线、分类散点),必须选用色盲友好的色板。 约 8% 的男性有不同程度色觉异常,红绿不分是最常见的——纯红配纯绿对他们来说就是同一种颜色。 下面这套五色板经测试在多数色觉类型下都可区分:

规则三:顺序型数据用同色系深浅

当数据本身有大小顺序(温度、评分、人口密度),用同一色相的不同明度来表达—— 比如浅蓝 → 中蓝 → 深蓝。明度变化天然对应大小变化,观众无需图例就能读出递进关系。 热力图、分级统计图(地图 choropleth)几乎都用这套逻辑。

规则四:发散型数据用对比色 + 中性中点

当数据围绕一个中性零点发散(如盈亏、正负相关系数、同比变化), 用两端对比色、中间留白或浅色。经典搭配是红 ↔ 蓝,中间白: 正值越深红、负值越深蓝、接近零的越浅。这样"涨/跌"的方向性一眼可辨。

⚖️ 数据诚实原则

可视化的底线不是"好看",而是诚实。一个误导性的图表,即使再精美, 也是在用专业的外衣传递错误的信息——这对决策的危害远大于没有图表。下面几条是不可逾越的底线, 违反任何一条都构成实质性的数据误导。

① 柱状/条形图 Y 轴必须从 0 开始

柱体的高度差就是观众感知的数值差。如果 Y 轴不从 0 开始(比如从 90 开始画到 100), 一个 5% 的增长会被画成翻倍的柱子——这是最常见的图表作弊手法,也是受众最容易被骗的地方。

② 不要使用 3D 图表

3D 透视会让前面的柱子显得更高、后面的扇形显得更大,所有比例都被扭曲。 Excel 早年的 3D 饼图是数据可视化的"原罪"——它好看,但不准。永远用 2D 平面图, 信息传达的准确性高于一切视觉花活。

③ 饼图各部分之和必须严格等于 100%

饼图的本质是"整体被切成几份"。如果各项百分比加起来是 95% 或 108%, 这个饼图在数学上就是不成立的。发布前务必核验加总,差异通常是四舍五入累积导致—— 可以在最大项上做尾差调整,或改用不依赖"凑满 100%"的条形图。

④ 折线图时间轴必须等距

折线图的横轴是时间,相邻刻度的物理距离必须对应等量的时间。 如果 1月、2月、3月之后直接跳到 12月,却把它们画成等距的点, 折线的斜率就完全失真了。不连续的时间段要么留空、要么用分隔线断开。

⑤ 标注数据来源与口径

任何对外发布的图表都必须注明:数据来源(哪个系统/机构)、 统计口径(如何定义"活跃用户")、统计周期(起止时间)。 没有来源的数字是不可核验的,没有口径的指标是不可复现的——两者缺一,图表的可信度归零。

📱 移动端适配

桌面端精心设计的图表,到了 375px 宽的手机上常常变成灾难:柱子挤成一团、标签互相重叠、 图例占掉一半屏幕。移动端不是"缩小版桌面端",而是另一套排版逻辑。 下面几条适配规则能避免绝大多数翻车。

• 柱状图转横向条形图:竖向柱状图的 X 轴标签在窄屏上会重叠或被旋转成 90°(难以阅读)。改用横向条形图,类别名称放在左侧竖排,空间宽裕、标签水平可读。
• 饼图图例移到下方:桌面端常把图例放在饼图右侧,移动端右侧没有空间。把图例改为图表下方的纵向列表,逐项"色块 + 标签 + 数值"排列。
• KPI 卡片从 3-4 列变 1-2 列:桌面一行四个 KPI,移动端要么 2×2 网格,要么纵向 1 列堆叠。数字本身不能缩小到看不清。
• 保证图表最小宽度,加横向滚动兜底:复杂图表(如多系列折线)有最小可读宽度。与其强行压缩,不如设定 min-width 并用 overflow-x: auto 允许横向滑动,保留信息完整性。
• 字号底线不能破:移动端坐标轴标签、图例文字最小 12px。低于这个值在 Retina 屏外几乎不可读,老年人群体更是直接放弃。

/* 移动端:柱状图转横向条形图,图例下移,KPI 堆叠 */
@media (max-width: 600px) {
  .bars { flex-direction: column; align-items: stretch; }  /* 改纵向 */
  .kpi-grid { grid-template-columns: 1fr; }                /* 单列堆叠 */
  .chart-mock { overflow-x: auto; }                       /* 复杂图表允许横滚 */
  .legend { order: 2; margin-top: 16px; }                 /* 图例移到下方 */
}

🚫 常见错误

下面这些是数据可视化里最高频的"翻车现场",几乎每一条都对应着一种误导。 做完图表后逐条自查,能挡掉绝大多数不专业的产出。

← 返回建站指导 查看布局指南