信息图表需要经历⽆数次推敲，才能更好得传递信息，全⽂13000字左右，阅读时⻓30分钟 图表是数据可视化的常⽤表现形式，是对数据的⼆次加⼯，可以帮助我们理解数据、洞悉数据背后的真相，让我们更好地适应这个数据驱动的世界。⽆论在 ⼯作汇报、产品设计、后台设计以及数据⼤屏中都能看到它的身影。然⽽，在实际⼯作中我发现很多初⼊⾏的设计师对于图表设计并不是很了解，同时市⾯ 上对于这⽅⾯的资料相对零散，不成体系。所以我结合了平时⼯作中的理解，梳理了这篇⽂章，希望能帮助到⼤家。

⼀、图表的组成

1.图表的构成

当我们把图表的结构进⾏拆解后，就会发现⼀个图表是由很多个细⼩构件组成的，这些构件有⾃⼰的名字和⽤途，分别是标题、轴、图形、图例、标签、提示信息。在平常使⽤的过程中，会根据场景去修饰删减⼀些构件元素，以此来减少冗余信息，⽤最适量的数据墨⽔⽐（Data-ink Ratio），帮助⽤户快速达成⽬标，在最少的时间内获取更多的信息。

  • 标题 - 描述图表的主题（包含主标题和副标题）
  • 标签 - 对当前这⼀组数据进⾏的内容标注
  • 轴 - ⽤来定义坐标系中数据在⽅向和值的映射关系
  • 图例 - 对图形本身的概括
  • 提示信息 - 当tap或者hover的时候，以交互提示信息的形式展示该点的数据详情
  • 图形 - 统计图表的视觉通道在形状上映射的视觉展现

image.png
接下来，我会⼀点⼀点地为⼤家讲解它们，⽅便⼤家合理的使⽤它们。但在此之前，我们先来了解⼀个知识点 - 数据墨⽔⽐，以便更好的理解接下来的内 容。

2. 数据墨⽔⽐

数据墨⽔⽐——“data-ink ratio”，是1983年视觉⼤师爱德华·塔夫特（Edward Tufte）在《The Visual Display of Quantitative Information》中提出的⼀ 个概念：⼀幅图表的绝⼤部分笔墨应该⽤于展示数据信息，数据变化则笔墨也变化。他将数据油墨⽐定义为图表中⽤于数据的墨⽔量除以总油墨量。其中数 据墨⽔指的是图表中不可删除的核⼼内容。⽐如，我可以删除图例、删除坐标轴、删除⽹格线，这可能不会影响你从图表中读取相关的信息。但如果我删除 柱形图、饼图这些图表的主体元素，那么图表就失去所要表达的内容了。

我个⼈更喜欢⽤“信噪⽐”= 信号/(信号+噪⾳) 这个概念去理解，因为通过可视化传达的信息不仅仅是数据，还有业务洞察，像观点、结论性的信息往往需 要⽤⽂字来呈现的也是⾄关重要。不过⽆论使⽤哪个词，最终的⽬的都是突出传达“信息”部分，去除那些⼲扰的“噪⾳”。

因此，图表中的数据墨⽔占⽐越多，那么该图表的冗余信息就越少，信息传递效果就越好。所以，在创建图表和图形时，我们的⽬标应该是在合理范围内最⼤化数据墨⽔⽐。
image.png

⼆、图表元素详解

1.标题

⼀个明确、相符的标题可以迅速让读者理解图表要表达的内容。通常图表的标题是根据图表所需要表达的内容决定的，⼤多数⼩伙伴可能认为命名没有太多 问题。但当这个图表的结论是单⼀且唯⼀的时候，建议在概括图表内容的标题中加⼊结论性的信息点。这样能减少读者误解你的意图的可能，⽽且能够确保 他们将注意⼒集中于你想着重强调的数据上 。
image.png

2. 轴（坐标轴）

2.1 定义

轴是能够使每个数组在维度空间内找到映射关系的定位系统，更偏向数学/物理概念。换句话说，轴的功能像是把可视化对象置于共同的基准上，再以标尺进行数值量测。在数据可视化中，一般存在于笛卡尔坐标系（直角坐标系）和极坐标系中。对轴进行「原子」要素的拆分，我们可以得到以下几种元素，分别为：轴线、轴刻度线、轴标签、轴标题（单位）以及网格线。
image.png

2.2 分类

根据对应变量是连续数据还是离散数据，轴可以分为：分类轴，时间轴，连续轴。
image.png

2.3 使⽤建议

2.3.1 轴线

轴线⼀般只考虑是否显示，结合上⾯所讲的数据墨⽔⽐，在有⽹格线的情况下，柱状图/折线图会隐藏 y 轴线，条形图则是隐藏 x 轴线，以达到信息降噪， 突出视觉重点的⽬的。
image.png

2.3.2 轴刻度线

轴刻度线是轴线上的⼩线段， 可以提供数值标签在坐标轴上的明确位置。轴刻度线有3种类型，分别为：置内、置中（即交叉⽅式）、置外。但刻度应置于 数值坐标轴外侧， 不建议刻度采⽤置中或置内⽅式显示。
image.png

轴刻度线的使⽤就是加强映射关系，快速的对应到数据点。分类轴较多出现在柱状、条形中，对于映射有天然的对应关系，故在分类轴中习惯隐藏轴上的刻 度线。

2.3.3 ⽹格线

⽹格线是⽤来辅助图表优化映射关系的。使⽤⽹格线可以增加数据的可阅读性，⽹格线提供了两种功能：⼀是延伸数值刻度⾄可视化对象中，以便观察数据 值之⼤⼩；⼆是增加可视化对象之间的⽐较基础 ，利于⽐较。

⽹格线⼀般跟随值域轴的位置单向显示，柱状图采⽤⽔平⽹格，条形图采⽤垂直⽹格。在使⽤⽹格线时，应该注意遵从主次原则，以轴线为主，⽹格线为 辅，样式上可采⽤实线或者虚线。避免颜⾊过重，不要使⽤纯⿊或者纯⽩，在视觉层级上不能抢了图表中的信息。
image.png

2.3.4 轴标题

轴标题（单位）主要⽤于说明定义域轴、值域轴的数据含义。当可视化图表的其他部分内容（标题、图例、轴标签等）已经能充分表达数据含义，根据奥卡 姆剃⼑定律，可以略去轴标题，近⼀步增⼤数据油墨⽐，精简画⾯元素。
image.png

2.3.5 轴标签

轴标签的设计较为复杂，涉及到的细节点⽐较多。这⾥将围绕直⻆坐标系的X轴和Y轴这两个⽅向进⾏讨论。

X轴标签

x 轴标签的设计重点在显示规则上，在可视化图表设计中，我们常常会碰到轴标签内容过⻓的情况，当空间有限时，轴标签会重叠在⼀起。如何处理此类问 题，这⾥根据轴的不同类型给了对应的解决⽅案 。

A. 连续/时间轴标签

在连续轴和时间轴中，我们可以利⽤抽样显示的⼿段来优化轴标签重叠的问题。这⾥不推荐使⽤旋转来缩减宽度。⼀⽅⾯从美观度上，旋转可能会破坏界⾯ 整体协调。另⼀⽅⾯，连续/时间轴并不需要显示所有的轴标签，参考格式塔中的[连续性原理]，尽管轴标签未能完全展示，但⽤户会在脑海中把缺失的部 分补⻬，轴标签仍然会像连续着的⼀样。
image.png

B. 分类轴标签

在分类轴中，由于标签与标签之间并没有紧密的逻辑关联关系。若采⽤抽样规则，隐藏了⼀些标签，则加⼤了⽤户对图表信息的提取难度，这是我们不想看 到的。对于分类轴，这⾥建议通过标签旋转或转换成其他图表（条形图）来缩减宽度。
image.png

Y轴标签

y 轴标签的设计重点在标签数量、取值范围和数据格式上。标签显示区域⼀般根据最⻓标签宽度⾃适应缩放。如果数组是固定的，就写成固定宽度，节省图 表计算量，提⾼渲染速度。

A. 轴标签的数量

轴标签的数量不建议过多，太多的标签必定导致横向⽹格线变多，造成元素冗余，⼲扰图形信息表达。根据 7±2 法则，Y轴标签数量应尽量控制在这个范围 内。
image.png

B. 轴标签的取值范围

⼀般来说，y 轴标签的取值应从 0 基线开始，以恰当反映数值。展示被截断的数据可能会误导⽤户做出错误的判断。⽐如数据本身没有那么起伏变化，处理 上下限的颗粒度，把刻度拉⻓，⼀样能显得“⻓势喜⼈”。
image.png

从上⾯就能明⽩，在看图表的时候千万不要被表⾯给欺骗，仅仅观看柱状图的⾼低趋势往往不能得出正确结论，需要注意坐标轴起始位置有没有被⼈做过虚假处理。
但存在是有根源的，对于此类的取值⽅式不做过多评价。这⾥主要想讲⼀下我常⽤的取值⽅式：对于Y轴的上限即最⼤值根据实际数据进⾏动态计算。⽐如 ⼀排数字中最⼤的为1190，那么轴标签最⾼位为1200；⼀排数字中最⼤的是1210，那么轴标签最⾼位为1400。其中的1400和2100是根据轴上的分段数决定的。
image.png

但有些⼈对Y轴标签的取值给出了如下建议：在折线图中，取值⼀般保证图形约占绘图区域的2/3，或者将柱状的⾼度控制在图表⾼度的85%左右。
image.png
但我认为这种⽅式太刻意了，并且规则定制的⽐较细。但是得承认这样⼦确认会显的好看，做案例可以，做真实数据不⾏。因为考虑到实际数据有的时候会出现极限情况，⽐如有些特别⼤有些特别⼩，为了保证⽤户能从图表中准确地获取信息，不应该为了美感⽽破坏了它的真实性。因此并不推荐⽤这种⽅式来取值。

C. 轴标签的数据格式

关于Y轴标签的数据格式，这⾥重点讲⼀些⽐较容易忽视的设计细节。第⼀，标签保留的⼩数位数保持统⼀，不要因为某些轴标签是整数值，就略去⼩数点。
image.png
第⼆，正负向的 y 轴标签，由于负值带“-”符号，整个 y 轴看起来会有视觉偏差，特别是双轴图的右 y 轴更明显。这⾥建议正负向 y 轴给正值标签带上 “+”，以达到视觉平衡的效果。
image.png

3. 图例

3.1 定义

图例是对图形本身的概括，在图表元素中属于辅助内容。它提供读者以对照的⽅式来理解可视化对象的项⽬归类。由映射图形形状和⽂本组成。
image.png

3.2 类型

根据数据类型不同，分为连续型图例和分类型图例；根据状态不同，图例可以被设置为静态或可交互态。
image.png

3.3 使⽤建议

3.3.1 数字⽂本取整

正如，伦斯勒理⼯学院的⾏为经济学家⾼拉夫杰恩(Gaurav Jain)所说：“数字有⼀种语⾔的⼒量，能给予⼈⼀种特殊的感觉。当我们使⽤具体的整数数字 时，⼈的衡量会减少。这种⾏为没有明显的原因。”

当⼈们的⼤脑在处理不以零结尾的不规则数字时，需要更多的脑⼒来处理，加⼤了获取信息的难度。因此在使⽤数字时，应该考虑这种偏好，倾向于⼀些取 整的数字。同样的，这不仅仅适⽤于图例中的数字，同样适⽤于坐标轴上下限的数字。
image.png

3.3.2⽔平图例和垂直图例

带有连续性的倾向于使⽤⽔平图例，因为更符合⼈们的阅读习惯；带有分类属性的倾向于使⽤竖直图例，图例的右边可放置更⻓的⽂本。
image.png

3.3.3 图例的位置

默认把图例放在左上⻆去做⼀个通⽤的⽅案看起来没⽑病。但考虑到⼈的视觉动线是从上⾄下，从左到右。这⾥有⼀个更好的做法：缩短⽤户对照图例看图 形的本能路径，可以提升对信息的获取效率。如下图所示：
image.png

3.3.4 多折线图采⽤跟随图例

当我们在制作多折线图时，经常会出现个数据系列之间相互交错的情形，并使得各种数据标记与之前的出现顺序不⼀致，即与图例排列顺序不同。因此⽤户 的眼睛必须在图例与折线之间进⾏连连看，最佳的做法是采⽤跟随图例形式，去标识出折线所属于的维值信息，这样会更直观有效。
image.png

4. 标签

4.1 定义

在图表中，标签是对当前的⼀组数据进⾏的内容标注。包括数据点、拉线、⽂本数值等元素，根据不同的图表类型选择使⽤。
image.png

4.2 使⽤建议

4.2.1 标签的显示策略

在绘制的图表的时候，我们倾向将标签直接打在图形外，但在「堆叠类」图表中，标签会显示在图形内。这样做会有个后果，标签的⽂本和图形经常需要交 叠展示，所以可读性需要⾜够良好，所以通过对 HS 值的判断，决定⽂字的颜⾊是否需要反思。这样对⽐度就在可控范围内，不会出现可读性的问题。有时，还需要增加描边，让标签更清晰。
image.png

当数据特别多并且密的时候会造成全部标签挤在⼀起的情况。在标签重叠时，采⽤动态计算的抽样显示⽅式，⾃动隐藏其中⼀个，同时当 Hover 图表时， 显示被隐藏的对应的数据。这样保证了图表的清晰度，也保证了信息的完整性。

5. 提示信息

5.1 定义

提示信息⼀般是tap或者hover的时候，图表以交互的⽅式吐出该位置的数据，帮助⽤户更深⼊的了解数据。⼀般由视觉标记图形，⽂本标签，数值标记这3 中元素构成。
image.png

5.2 类型

提示信息的展现形式由4种。按不同的图表类型，分为悬浮、固定位置、固定在轴上、固定在图形上。
image.png

6. 图形

6.1 定义

⼈类从图形中获取信息的效率远⾼于⽂本，可以说如今⼈类早已进⼊了读图时代。图形是统计图表的视觉通道在形状上映射的视觉展现，是图表的必备元素，承载着数据背后蕴含的信息。按照组件原⼦化的思路来定义现在千奇百怪的图表，⼤致可以分为六种基础样式：折线，⾯积，散点，⽓泡，饼/环，柱 形，条形。
image.png

6.2 使⽤建议

这⾥主要想重点讲⼀下，如何通过设计来强化图表信息的表达，以便简化⽤户获取信息的成本。关于具体某个图表的制作规范和运⽤场景，会在之后的⽂章中提及。

6.2.1 改变颜⾊ - 明暗/深浅/⾊彩对⽐

通过明暗对⽐、颜⾊对⽐以及⾊彩对⽐等⼿段可以有效的区分信息，在视觉层级上也是明显的处理了视觉噪⾳，便于⽤户区分信息。
image.png

6.2.2 添加标注

通过添加标注，⼈为去⼲预信息的表达，多⽤于⼀前⼀后的标识，便于⽤户识别信息。
image.png

三、选择合适的图表

我们做数据分析的有句话叫“⼀图胜千⾔”，图表是展现数据的⼀种重要展现形式，选对了图表就能帮助我们更加快速、直观的传达数据信息。
那如何挑选合适的图表呢？在我看来⼤致分为三步：
1. 确定核⼼内容：明确要⽤图表传达的核⼼信息；
2.判断⽐较关系：判断数据之间的⽐较类型（如占⽐、数量、趋势等）；
3.选择图表类型：选择对应含义的图表（如饼图、柱状图、折线图等）。
image.png
很多朋友在判定和选择图表类型时会不知所措，但其实你只需要记住⼀句话：决定图表形式的不是数据，⽽是你要传达的信息。

1. 确定核⼼内容

同⼀组数据⽤不同的⻆度看，有不同的主题，⽐如下⾯这组数据：
image.png
从另⼀个⻆度看同样是5⽉份的数据，你还可能会将侧重点放在每个产品占销售额的百分⽐上。那你的图表主题应该是“5⽉份，产品 A 占公司产品总销售额 的⽐例位居⾸位”。
综上所述，选择合适图表的关键，最初也是最重要的，就是明确要⽤图表传达的核⼼信息。

2. 判断⽐较关系

在实际⼯作中需要⽤图表反映数据的场景五花⼋⻔，但按数据关系分类⽆⾮以下⼏种情况，给⼤家简单举⼏个例⼦：

  • “预计在今后 10 年多的时间⾥，销售额将增⻓ ”对应的关系为时间趋势；
  • “雇员的最⾼⼯资额在 30000 到 35000 美元之间 ”对应的关系为频率分布；
  • “汽油并不是牌⼦越响价格越⾼其性能就越好”对应的关系为相关性；
  • “9 ⽉份⾥，6 个区域的营业额⼤致相同”对应的关系为排名对⽐；
  • “销售部经理在他的领域内只花费了他 15% 的时间”对应的关系为占⽐。

image.png

3. 选择图表类型

国外专家Andrew Abela曾整理了⼀份图表类型选择指南图示（如下图），他把数据的关系分成了4种类型，帮助我们去选出合适的图表来呈现。
image.png
但其实结合我⾃⼰的经验，考虑到⽇常企业的数据分析场景，图中有些图表使⽤频率是⾮常低的。所以我参考了上图的部分内容，对其进⾏了总结，替换掉 了⼀些图表并对其进⾏了美化，总体上我认为这是会更适合商务图表展示，⽽且会更接地⽓，适合⼤家参考使⽤。
image.png

四、常⻅的可视化图表

1. 折线图

1.1 定义

折线图是通过线条的波动（上升或下降）来显示连续数据随时间或有序类别变化的图表，常⽤于反映数据随着时间推移⽽产⽣的变化趋势。
image.png

2.2 适⽤场景

横轴为连续类别（如时间）且注重变化趋势、预测，适⽤于折线图。

举个例⼦：⽐如想看2020年上半年商品的营业额情况，并对⾛势做⼀个分析。由于每个⽉份的商品营业额相关的，它们代表⼀种数据在不同时间下的数据 值，因此我们可以⽤折线图将它们连接起来。

但如果想看2020年上半年北京、上海、⼴州、深圳、南京五个省份的营业额情况，由于每个省份的营业额是不相关的，所以我们不能随便⽤折线图来替代 柱状图。
image.png

2.3 使⽤建议

2.3.1 使⽤合适的时间间隔，使锯⻮状的线条平滑

如果折线图上下浮动过于剧烈，那么可以尝试拉⻓时间间隔，⽐如不每天采样⽽以周为单位来采样。⽤户不太愿意去阅读锯⻮状的线条，或者说他们不会喜欢这样的图表。

但是如果有强需求说是⼀定要在某个范围，这条略过。
image.png

2.3.2 善⽤数据点标记、特殊标记

当有些特定的数值特别重要时，我们可以在线条上标注出他们，但全部标清数据点在⼤多数情况下标记出来的意义不⼤，从视觉上来看会显得⾮常琐碎。
image.png

2.3.3 分清主次关系，加强数据感知

若对⽐数据较多，为了避免信息繁杂。可采⽤实线的强弱和⾊彩的对⽐来区分主次内容，让⽤户更关注在主折线，获取主数据的波动感知。
image.png

知识扩展：折线图与曲线图的区别

折线图：更关注于点的数据，相对短的⼀段时间数据随时间变化的趋势；
曲线图：更关注点构成的线点数据，⼀段时间内整体数据随时间变化的趋势。
image.png
曲线图是折线图中的一种，当图表数据点过于密集时，使用曲线图更能表达数据随时间变化的趋势、周期性。

2. ⾯积图

2.1 定义

⾯积图⼜叫区域图，是⼀种随有序变量的变化，反映数值变化的统计图表，原理与折线图相似。它在折线图的基础上多了⼀个⾯积概念，填充的区域可以表示“累积”的含义（当X轴为连续的数值时）。
image.png

2.2 适⽤场景

当注重随时间的趋势变化和累计的值时，适⽤于⾯积图。

例如：想要查看今年10⽉和去年10⽉每⽇的商品营业额⾛势，并对整⽉营业额进⾏⽐较，这时就可以采⽤⾯积图。但当⾃变量不是顺序性的变量，则不适合⽤⾯积图。

2.3 使⽤建议

2.3.1 使⽤透明填充⾊

透明度可以很好的帮助使⽤者观察不同序列之间的重叠关系，没有透明度的⾯积会导致不同序列之间相互遮盖减少可以被观察到的信息。
image.png

2.3.2 当X轴数据较少，考虑其他图表

当数据值相距很远时，区域是模糊不清的，此时不太适合使⽤⾯积图展示。

如下⽅示例虽然仔细分析能确定只展示了两个类别，乍⼀看，很可能会误以为图表上显示三种不同的颜⾊，但使⽤分组柱状图就可以很好解决这个问题。

image.png

2.3.3 不要超过4个数据系列

⾯积图只适合展现少量的数据，最多建议不要超过四个类别，否则就会导致⾮常难以识别。因此在多个类别下，要尽量避免使⽤⾯积图，采⽤相似图表来表 示，⽐如折线图。
image.png

3.堆叠⾯积图

3.1 定义

堆叠⾯积图与⾯积图类似，都是在折线图的基础上，将折线与⾃变量坐标轴之间区域填充起来的统计图表。

唯⼀的区别是堆叠⾯积图有多个数据系列，它们⼀层层的堆叠起来，每个数据系列的起始点是上⼀个数据系列的结束点。
image.png

3.2 适⽤场景

适⽤于观察多变量随时间的变化情况，且既能看到整体趋势⼜能看到各变量的构成情况。

3.3 使⽤建议

3.3.1 尽量不要对Y轴进⾏裁切

为了保证数据传递的准确性，在适⽤堆叠⾯积图时，尽量不要对Y轴进⾏裁剪。
image.png

3.3.2 不要超过7个数据系列

当数据系列过多时，往往造成难以观察，所以建议使⽤堆叠⾯积图时数据系列最好不要超过7个。
image.png

3.3.3 变化量⼤的数据置于上⽅

建议堆叠⾯积图中把变化量较⼤的数据放在上⽅，变化量较⼩的数据放在下⽅会获得更加的展示效果。
image.png

3.3.4 不适合带有负值的数据系列

堆积⾯积图要展示部分和整体之间的关系，所以不能⽤于包含负值的数据的展示。

4.柱状图

4.1 定义

柱状图，是⼀种使⽤矩形条，对不同类别进⾏数值⽐较的统计图表。使⽤垂直或⽔平的柱⼦的⻓短对⽐数值⼤⼩，其中⼀个轴表示需要对⽐的分类维度；另 ⼀个轴代表相应的数值。

在柱状图上，分类变量的每个实体都被表示为⼀个矩形（通俗讲即为“柱⼦”），⽽数值则决定了柱⼦的⾼度。纵向柱状图的柱是垂直⽅向的，如图：
image.png
横向柱状图的柱是⽔平⽅向的，⼜称条形图，如图：
image.png

4.2 适⽤场景

柱状图最适合对分类的数据进⾏⽐较，尤其是当数值⽐较接近时，由于⼈眼对于⾼度的感知优于其他视觉元素（如⾯积、⻆度等），因此使⽤柱状图更加合适。

如下图所示，5组数据的数值很接近，若采⽤饼图，这⽆法直观的进⾏⽐较，右边的柱状图则能更好地传递图表信息。
image.png

4.3 使⽤建议

4.3.1 使⽤合适的宽度去适配柱条的宽度

当柱⼦太窄时，⽤户的视觉可能会集中在两个柱中间的负空间，⽽这⾥是不承载任何数据的。宽度推荐使⽤在1/2 柱宽到 1 柱宽之间，但也要视情况⽽定。
image.png

4.3.2 不推荐采⽤全圆⻆

保证柱形图有精确的圆⻆，以确保柱形顶部精确测量柱形的⻓度；全圆⻆则有可能歪曲可视化图表的表达。
image.png

4.3.3 避免适⽤过多的颜⾊

柱形图⼀般⽐较⼀组分类数据，柱⼦的⾼低已经传递了相关信息，不必通过颜⾊来区分，所以建议使⽤相同的颜⾊或同⼀颜⾊的不同⾊调，过多的颜⾊会增 加理解成本。

如果需要强调某个数据时，可以使⽤对⽐⾊或者变化⾊调来突出显示有意义的数据点。
image.png

4.3.4 采⽤有序排列，轴标签右对⻬

对多个数据系列排序时，如果不涉及到⽇期等特定数据，最好能符合⼀定的逻辑⽤直观的⽅式引导⽤户更好的查看数据。

可以通过升序或降序排布，例如按照数量从多到少来对数据进⾏排序，也可以按照字⺟顺序等来排布。总之，按照逻辑排序可以⼀定程度上引导⼈们更好地 阅读数据。
image.png

4.3.5 标签直接显示在柱体上

条形图还可以通过省略横轴和纵轴，并直接在柱⼦上表明数值，来降低数据墨⽔⽐，进⼀步提⾼信息的获取效率。
image.png

5.堆叠柱状图

5.1 定义

堆叠柱状图（Stacked Column Chart），⼜称堆叠柱形图，是⼀种⽤来分解整体、⽐较各部分的图表。 它是柱状图的扩展，不同的是，柱状图的数据值为并⾏排列，堆叠柱图则是⼀个个叠加起来的。

它可以展示每⼀个分类的总量，以及该分类包含的每个⼩分 类的⼤⼩及占⽐，并且这些⼦类别⼀般⽤不同的颜⾊来指代。
image.png

5.2 适⽤场景

对⽐不同类别数据的数值⼤⼩，同时对⽐每⼀类别数据中，⼦类别的构成及⼤⼩。
例如下图显示的是每种化妆品在各个产品的销售情况，通过堆叠柱状图，我们可以很清晰低对⽐同⼀种化妆品到底在哪个城市销量更好。
image.png

5.3 使⽤建议

5.3.1 纵向堆叠柱状图 – 最多不要超过6个数据

堆叠柱状图最好的展示效果是每个组只包含两到三个类别，最多不要超过6个，因为太多的数据系列会很容易让⼈眼花缭乱， 如下图：
image.png

5.3.2 数值标签居中对⻬

堆叠条状图的数值建议在图形之间，居中对⻬，在图形左侧容易产⽣误解。
image.png

5.3.3 避免⽤堆叠柱状图展示包含负数的数据

由于要分析部分数据在整体中的占⽐，避免⽤堆叠柱状图展示包含负数的数据。因为柱⼦的⾼度必须为正数，有负数则⽆法直观显示在图上。
image.png

5.3.4 数据标签特别⻓时，采⽤⽔平堆叠柱状图

⼤多数的堆叠柱状图都是垂直绘制的，但是如果你的数据标签特别⻓时，考虑更好地展示效果，可以选择使⽤⽔平堆叠的⽅式。

6. 分组柱状图

6.1 定义

分组柱状图，⼜叫聚集柱状图。跟柱状图类似，使⽤柱⼦的⻓短来映射和对⽐数据值。每个分组中的柱⼦使⽤不同的颜⾊或者相同颜⾊不同透明的⽅式区别 各个分类，各个分组之间需要保持间隔。
image.png

6.2 适⽤场景

对⽐不同分组内相同分类的⼤⼩，对⽐相同分组内不同分类的⼤⼩。其中，分组个数不要超过 12 个，每个分组下的分类不要超过 6 个。

6.3 使⽤建议

6.3.1 数据的数值差异⼤，建议使⽤双轴

分组柱状图适合⽐较多组数值差异不⼤的数据，⽐如，对于要同时查看⼀个数值和百分⽐的时间趋势，双轴图就派上⼤⽤场了。

为了浏览起来更直观，建议⽤柱图来表示数值类数据，⽤线图来表示百分⽐。
image.png

6.3.2 组之间的间距 > 柱⼦之间的间距

分组柱状图强调组的概念，组是⼀个个重复单元。按照格式塔原理，每两个分组之间的间距要⼤于组内不同系列之间的间距，以免造成视觉上错误的归类和 区分。
image.png

7. 双向柱状图

7.1 定义

双向柱状图是使⽤正向和反向的柱⼦显示类别之间的数值⽐较，其中分类轴表示需要对⽐的分类维度，连续轴代表相应的数值，分为两种情况，⼀种是正向 刻度值与反向刻度值完全对称；另⼀种是正向刻度值与反向刻度值反向对称，即互为相反数。

同样的，可分为垂直⽅和⽔平两个⽅向，其中⽔平双向柱状图⼜叫正负条形图。
image.png

7.2 适⽤场景

双向柱状图⼀般⽤于正负两份相反数据的对⽐，例如⼀周内个⼈收⼊和⽀出的统计，其中收⼊为正数，⽀出为负数。

使⽤双向柱状图可以很明确的对收⼊和⽀出做出对⽐，并能从单个系列中分析收⼊和⽀出的数值及波动。
image.png

7.3 使⽤建议

7.3.1 不适合不含相反含义的数据

双向柱状图多⽤于展示含相反含义的数据，因此要避免不具有正负含义的数据使⽤⽽造成的误解。

如下图⼈⼝统计图表中使⽤双向柱状图⼀边绘制男性⼀边绘制⼥性，只是单纯的两类不同数据的对⽐，并不存在负数。这种情况将两个数据序列绘制成⼀个 分组柱状图是更合适的。
image.png

7.3.2 采⽤⾊彩差异较⼤的颜⾊

向柱状图正向和负向的数据具有对⽐性，因此⼀般选⽤差值较⼤的具有对⽐性的颜⾊，保证⾼效的获取有效的信息。
image.png

8. 饼图

8.1 定义

饼图，或称饼状图，是⼀个划分为⼏个扇形的圆形统计图表。在饼图中，每个扇形的弧⻓（以及圆⼼⻆和⾯积）⼤⼩，表示该种类占总体的⽐例，且这些扇 形合在⼀起刚好是⼀个完全的圆形。
image.png

8.2 适⽤场景

饼图主要⽤于展现不同类别数值相对于总数的占⽐情况，尤其是想要突出表示某个部分在整体中所占⽐例，且该部分所占⽐例达到总体的25%或50%时， 很适合⽤饼图。
image.png

8.3 使⽤建议

8.3.1 分块数量尽量控制在5个以内，最多不要超过9个

饼图不适⽤于多分类的数据，因为随着分类的增多，每个切⽚的⾯积变⼩，视觉区分度随之降低。

当数据类别较多时，我们可以把较⼩或不重要的数据合并成第五个模块命名为”其它”。如果⼀定要保证数据的完整性和准确性，此时选择柱状图或堆积柱 状图或许更合适。
image.png

8.3.2 切⽚⼤⼩相似时，建议采⽤柱状图或南丁格尔玫瑰图

由于⼈类对“⻆度”的感知⼒并不如“⻓度”，在需要准确的表达数值（尤其是当数值接近、或数值很多）时，饼图常常不能胜任，因此当各类别数据占⽐较 接近时（如下左图），我们很难对⽐出每个类别占⽐的⼤⼩。

此时建议选⽤柱状图或南丁格尔玫瑰图（如下右图）来获取更好的展示效果。
image.png

8.3.3 正确放置切⽚位置，提⾼图表可读性

⼤多数⼈视觉习惯是按照顺时针和⾃上⽽下的顺序去观察。因此在绘制饼图时，建议从12点钟开始沿顺时针右边第⼀个分块绘制饼图最⼤的数据分块，有 效的强调其重要性。

其余的数据分块有两种建议：⼀种是按照数据⼤⼩依次顺时针排列；另⼀种在12点钟的左边绘制第⼆⼤的分块，其余的分块按照逆时针排列，最⼩的分块 放在底部。

让⽤户的视线焦点集中在上半部分，增强获取信息的速度。
image.png

9. 环形图

9.1 定义

环形图，⼜叫做甜甜圈图，是由两个及两个以上⼤⼩不⼀的饼图叠在⼀起，挖去中间的部分所构成的图形。
image.png

9.2 适⽤场景

适⽤于展示分类的占⽐情况，与饼图⽤法相似，但环图相对于饼图空间的利⽤率更⾼，⽐如我们可以使⽤它的空⼼区域显示⽂本信息，⽐如标题等。
image.png

9.3 使⽤建议

9.3.1 不适⽤于分类过多的场景

关于环图不适⽤分类过多的场景，否则阅读会将很差（如下图）。

可⾏的办法：⼀是将⼀些不重要的变量合并为“其他”，避免扇区超过5个；⼆是改⽤条形图或者表格。尤其是，如果你想让读者清楚的阅读到每⼀条数据， 选⽤表格会更加直截了当。image.png

9.3.2 不适⽤于分类占⽐差别不明显的场景

下图中游戏公司的不同种类的游戏的销售量相近，所以不太适合使⽤环图，此时可以使⽤柱状图。
image.png

10. 南丁格尔玫瑰图

10.1 定义

南丁格尔玫瑰图⼜名鸡冠花图、极坐标区域图，尽管外形很像饼图，但它是⽤半径来反映数值⼤⼩的（⽽饼图是以扇形的弧度来表示数据的）。
image.png

10.2 适⽤场景

对⽐不同分类的⼤⼩，且各分类值差异不是太⼤时。由于半径和⾯积之间是平⽅的关系，视觉上，南丁格尔玫瑰图会将数据的⽐例夸⼤。

10.3 使⽤建议

10.3.1 分类过少的场景，直接⽤饼图或者环图来表示

如下图展示⼀个班级男⼥同学的个数，这种场景下，使⽤饼图或者环形图⽐⽤南丁格尔玫瑰图更合适。
image.png

10.3.2 希望精确的⽐较数值⼤⼩时，推荐使⽤柱状图

南丁格尔玫瑰图是将数值映射到半径上，⽽扇形的⾯积和半径是平⽅关系，因此视觉上看，数值的差异会被扩⼤。
因此，当数值差异较⼤、或者希望精确的⽐较数值⼤⼩时，推荐使⽤柱状图。

下⾯使⽤南丁格尔玫瑰图展示各个省份的⼈⼝数据，这种场景下使⽤玫瑰图不合适，原因是在玫瑰图中数值过⼩的分类会⾮常难以观察，推荐使⽤条形图 （横向柱状图）。
image.png

11. 散点图

11.1 定义

散点图，⼜名点图、散布图、X-Y图，它是将所有的数据以点的形式展现在平⾯直⻆坐标系上的统计图表。它⾄少需要两个不同变量，⼀个沿x轴绘制，另 ⼀个沿y轴绘制，每个点在X、Y轴上都有⼀个确定的位置。
image.png

11.2 适⽤场景

散点图适⽤于分析变量之间是否存在某种关系或相关性。其中，相关性包含正相关（两个变量值同时增加）、负相关（⼀个变量值增加另⼀个变量值下 降）、不相关、线性相关、指数相关、U形相关等。

11.3 使⽤建议

11.3.1 尽量为散点图添加趋势线

在观察两个变量之间的关系时，趋势线是⾮常有⽤的，趋势线的形状⾛向解释了两个变量之间的关系类型，还可以⽤来预测未来的值。但需要注意的是趋势 线最可只能使⽤两条，以免⼲扰正常的数据的阅读。\

11.3.2 数据量过少时，不推荐使⽤散点图

散点图只有有⾜够多的数据点，并且数据之间有相关性时才能呈现很好的结果。如果⼀份数据只有极少的信息或者数据间没有相关性，那么绘制⼀个很空的 散点图和不相关的散点图都是没有意义的。
image.png

11.3.3 ⽤颜⾊、形状来区分不同的数据类别

如果数据包含不同系列，可以给不同系列使⽤不同的颜⾊，例如蓝⾊代表男性，红⾊代表⼥性，并增加图例标注出蓝⾊代表的含义。

帮助⽤户快速获取相关信息。但要注意，要避免数据分类过多的情况，过多的数据分类，会导致⽆法快速识别，失去可视化的意义和价值。
image.png

12. ⽓泡图

12.1 定义

⽓泡图是显示变量之间相关性的⼀种图表，由笛卡尔坐标系（直⻆坐标系）和⼤⼩不⼀的圆组成，可以看作是散点图的变形。

与散点图不同的是，⽓泡图是⼀个多变量图，它增加了第三个数值即⽓泡⼤⼩的变量，在⽓泡图中，较⼤的⽓泡表示较⼤的值。可以通过⽓泡的位置分布和 ⼤⼩⽐例，来分析数据的规律。
image.png

12.2 适⽤场景

⼀般⽽⾔，⽓泡图需要3个变量，其中2个决定了⽓泡在笛卡尔坐标系中的位置（即x，y轴上的值），另外⼀个则通过⽓泡的⼤⼩来表示。

当然，⽓泡图也可以容纳更多维的数据，例如⽤第4个变量决定⽓泡的颜⾊、透明度等。

特殊地，⽓泡图也可以⽤于⼆维数据，即y轴和⽓泡⼤⼩使⽤同⼀维度的数据（y轴和⽓泡⼤⼩的双视觉编码）。

这种情况下，相⽐于柱状图它能达到更美观的⽬的。例如，下图表示了2014年每个季度的销售额。x轴代表时间，y轴和⽓泡⼤⼩代表了销售业绩。
image.png

12.3 使⽤建议

12.3.1 ⽓泡的⼤⼩应体现为⾯积，⽽⾮半径

绘制⽓泡图时，需注意⽓泡的⼤⼩是映射到⾯积⽽不是半径或者直径绘制的。

以下图为例，如果两个数值是1：2的关系，如果按照半径1：2来绘制，那么实际的圆⾯积，将会是1：4的⽐例，这就夸⼤了数据之间的差异。
image.png

13. 雷达图

13.1 定义

雷达⼜叫戴布拉图、蜘蛛⽹图。它是⼀种显示多变量数据的图形⽅法。通常从同⼀中⼼点开始等⻆度间隔地射出三个以上的轴，每个轴代表⼀个定量变量， 各轴上的点依次连接成线或⼏何图形。

每个变量都有⼀个从中⼼向外发射的轴线，所有的轴之间的夹⻆相等，同时每个轴有相同的刻度，将轴到轴的刻度⽤⽹格线链接作为辅助元素，连接每个变 量在其各⾃的轴线的数据点成⼀条多边形。
image.png

13.2 适⽤场景

雷达图对于查看哪些变量具有相似的值、变量之间是否有异常值都很有⽤。雷达图表也可⽤于查看哪些变量在数据集内得分较⾼或较低，因此⾮常适合显示 性能（⻅下图）。

同样，雷达图也常⽤于排名、评估、评论等数据的展示。
image.png

13.3 使⽤建议

13.3.1 多边形数量控制在五个左右

⼀个雷达图包含的多边形数量是有限的，如果有五个以上要评估的事物，⽆论是轮廓还是填充区域，都会产⽣覆盖和混乱，使得数据难以阅读。
image.png

13.3.2 控制变量的数量

如果变量过多，也会造成可读性下降，因为⼀个变量对应⼀个坐标轴，这样会使坐标轴过于密集，使图表给⼈感觉很复杂，所以最佳实践就是尽可能控制变 量的数量使雷达图保持简单清晰。
image.png

14. 漏⽃图

14.1 定义

漏⽃图，形如“漏⽃”，在开始和结束之间由N个流程环节组成。

漏⽃图总是起始于100%的数量，并在各个环节依次减少，每个环节⽤⼀个梯形来表示，整体形如漏⽃。与饼图⼀样，漏⽃图呈现的也不是具体的数据，⽽是该数据相对于总数的占⽐、漏⽃图不需要使⽤任何数据轴。
image.png

14.2 适⽤场景

漏⽃图适⽤于业务流程⽐较规范、周期⻓、环节多的单流程单向分析，通过漏⽃各环节业务数据的⽐较能够直观地发现和说明问题所在的环节，进⽽做出决策。

其中，数据是要有序的，彼此之间有逻辑上的顺序关系，阶段最好⼤于3个。

14.3 使⽤建议

14.3.1 数据要逻辑上的顺序关系

漏⽃图不适合没有逻辑关系的数据，换句话说，如果数据不构成“流程”，那么不能使⽤漏⽃图。例如，想要展示不同游戏类型的销量对⽐，⽤漏⽃图就是 不合适的。
image.png

14.3.2 梯形的⾼度、⾯积都是有意义的，不应想当然的篡改

漏⽃图作为⼀种统计图表，漏⽃图的“⻓相”，本质上是由数据决定的。在传达数据时，漏⽃图是通过“⾯积”表示的，对于⼈眼来说，⾯积的识别本来就不太容易。

如果我们在制作漏⽃图时，再⼈为的改变漏⽃中每⼀个梯形的⾼度，那么识别起来就⼗分困难。以下图为例，抹掉数字后，你⼏乎不可能知道第⼀层是第⼆层的三倍。
image.png

五、后记

以上就是本篇⽂章的全部内容，关于可视化相关的知识还有很多没有涉及到，例如可视化图表的配⾊、商务仪表盘、以及其他的图表运⽤场景等等都还未讲 到。以后有时间慢慢整理分享给⼤家，谢谢阅读！

参考⽂献：
蚂蚁数据可视化
设计师要了解的数据可视化 —— 基础篇
数据可视化指南：那些高手才懂的坐标轴设计细节
ECharts数据可视化

原文：美芳Mia