TLDR

* 斜率图表示两个时间点的涨跌幅度
* 哑铃图表示两个时间点或者类别的差异，更多地强调差值

来源

本文的案例讲解与改进设计，来自一个专业机构的行业研究报告：中国线上消费品牌指数CBI（2023-2025）。

原设计图

以并列条形图，展示了相隔两年的两个时间点，2023Q1和2025Q1，CBI数值的对比情况。

原文图片说明

> 从行业对比来看，各行业消费品牌指数具有显著差异。更高的行业消费品牌评分，意味着该行业的无品牌产品与低评分品牌较少、且销售额更多集中于头部品牌；较低的行业消费品牌评分，则意味着该行业的低评分品牌与无品牌产品较多、且销售额并未集中于头部品牌，该行业仍存在较大的品牌竞争与成长空间。

分析

* 正文并无文字明确引用图5
* 2025Q1的条上标注了绝对数值，2023Q1的条上标注的是比照于2023Q1，2025Q1的增长量，与图标题的描述不太一致
* 类别太多，细条的并列条这种呈现看起来有条纹效应，有些闪烁
* 标注的数值，精确到百分位，是否有必要？
* 并列条形图是阵线增长差异的最好选择么？

第一次改进设计

第一次改进设计要点

* 用斜率图呈现涨幅
* 斜率线首尾都标注数值，精确到个位
* 用深蓝色线条，强调涨幅超过5分的类别，试图凝练一个观点
* 其他涨幅低于5分的类别，用灰色线条
* 在较新的时间点2025Q1上，标注类别信息，文字与线条同色

第一次改进设计存在的问题

* 观察斜率图，发现因为数值都在增加，因此所有倾斜都是左下向右上的，导致各个斜率线条之间的差异不大，这也是为什么要用深蓝色线条强调一些类别的原因

第二次改进设计

改变一下观点的侧重，强调变化值、强调差异。

采用哑铃图，再次改进设计如下。

第二次改进设计要点

* 类别信息在纵轴上标注，横轴给出分数值
* 蓝色圆点和橙色圆点，对应于2023Q1和2025Q1的分数值
* 两个圆点之间用渐变色过渡，表达两个点之间的连接和变化
* 两个圆点之间长度，表示两个时间点之间的消费品牌指数的差值
* 在较新的时间点2025Q1上，标注增幅数据（蓝色圆点和橙色圆点的距离，或者说增加值），文字颜色与2025Q1圆点同色

结论

* 斜率图表示两个时间点的涨跌幅度，设计者都会期望有涨跌互现的斜率图，以方便对比，便于凝练观点
* 哑铃图表示多个类别在两个时间点的数值差异，更多地强调差值
* 色彩仍然是重要的类别工具
* 注意过渡色在哑铃图中的应用，增加了这张图的美感

免责声明

* 本文内容是从图表设计角度出发的讨论、阐述
* 本文包含的任何业务观点都是服务于图表设计分析
* 本文不包含对 图形来源报告、文章的内容、观点 的任何否定意图