【引子】本文源自与一个产品经理的对话。为什么“一图胜千言”呢？如果语言是一维的，那么图像就是二维或多维的， 降维打击体现在一个“胜”字。如果将图像使用自然语言进行表达看作一种数据降维的方式， 那这种降维能力可能是需要训练的。不同的人面对同一幅图可能有不同的表达，对于数据产品而言， 有没有数据与图像之间的内在关系模式呢？

习惯上， 我们会学习图表的特点，进而找到不同图表适用于表达哪些数据类型。但是，在工作中， 我们经常遇到的是已知数据指标，如何在Dashboard上呈现这些数据。不论是产品经理、设计师还是工程师，理解怎样的数据通过怎样的图像表达比较合适都是有意义的。

数据类型是老生常谈，从数据维度来看，有单变量和多变量，从变量自身来看，有离散和连续的区别。从数据类型出发，面向需要表达的指标，老码农尝试对常见的可视化图例进行了梳理。

如果我们关注单一变量的指标变化，可以优先考虑直方图以及箱形图。

1 直方图

直方图(Histogram)，又称质量分布图，是一种统计报告图，由一系列高度不等的纵向条纹或线段表示数据分布的情况。

数据类型：单变量的序列 使用场景：表达单变量的序列分布 表达形态：数据被分为相等的区间，高度一般表达数据的频率

局限：不适合跨数据组的比较。

2 箱形图

箱形图（Box-plot）又称为盒式图或箱线图，是一种用作显示一组数据分散情况资料的统计图。因形状如箱子而得名。在各种领域也经常被使用，常见于品质管理。

数据类型：单变量的连续值 使用场景：数据的分布及异常值检测 表达形态：用矩形代表4分位间距，中值由框内的一条线表示，异常值绘制为单个点。

局限：当数据是分类的或显示随时间变化的趋势时，避免使用箱形图。

如果关注两个变量关系，我们可以优先考虑散点图及其变体气泡图。

3 散点图

散点图（scatter plot）一般用在回归分析中，数据点在直角坐标系平面上的分布图，散点图表示因变量随自变量而变化的大致趋势，据此可以选择合适的函数对数据点进行拟合。

数据类型：两个连续变量 使用场景：表达两个连续变量的关系 表达形态：一个变量代表横轴，另一个变量代表纵轴

局限：不适用于相关性不强的数据，也不适合比较多个类别

气泡图

气泡图（bubble chart）是可用于展示三个变量之间的关系，一般可视为散点图的变体。

使用场景：表达两个变量在第三个维度之间的关系 表达形态：气泡图与散点图相似， 但加入了一个表示大小的变量，气泡由大小指示相对重要的程度

局限：气泡的大小不能没有意义，且不适合比较多类别的更多维度。

对于更一般的情况，多个变量的数据可以划分成离散型和连续型两种。

多个离散变量一般表达不同的类别，不同类别之间的关系一般包括：

4 柱状图

柱状图（bar chart），又称长条图、条图、条状图、棒形图，是一种以长方形的长度为变量的统计图表。

数据类型：类别数值 使用场景：跨类别的数量比较 表达形态：使用长方条表示数据，长度代表数量，可以是垂直方向的，也可以是水平方向的。

局限：不适合类别太多的场景，也不适合连续数据的表达。

堆积柱状图

堆积柱形图（stacked bar chart）的特点是它能将每根柱子进行分割,可以显示大类目下的细分类目占比情况。

数据类型：类别及内部元素的数值 使用场景：表达不同类别的对比，包括各类别内部的组成 表达形态：堆叠的矩形来表示类别，里面的小方块表示每个类别内部的元素，小方块的长度代表元素的值，堆叠而成矩形代表类别的值。

局限：每个类别内的元素不能太多，一般不大于6。

5 多纳图

实际上，饼图是更为常见的，英文为Sector Graph，又名Pie Graph。饼图显示一个数据系列 中各项的大小与各项总和的比例。多纳图（donut chart），是饼图的一种变体。

数据类型：类别的占比 使用场景：表达不同类别的百分比 表达形态：饼图的另一种表达，每一个局部环代表了该类别的总体占比

局限：不适合类别太多以及跨组比较

6 树状图

树形图（tree map）是树的数据结构的图形表示形式，以父子层次结构来组织对象，是枚举法的一种表达方式。

数据类型：层次型的类别 使用场景：表达数据的层级关系以及占比 表达形态：一般用线条和节点表示。这里给出的是一种变体，以嵌套的矩形表达数据，矩形大小表达占比的值，另外，颜色可以表达额外的信息。

局限：不适合类别过多的场景， 也不适用于离散变量之间没有层级关系的场景。

7 雷达图

雷达图（Radar Chart），也称为蜘蛛图，星图，网图，极坐标图或Kiviat图，是以从同一点开始的轴上表示的三个或更多个定量变量的二维图表形式来显示多变量数据的图形方法。轴的相对位置和角度通常是无信息的。

数据类型：多变量的多个维度 使用场景：表达复杂变量的整体性能，以及多个维度的整体特性 表达形态：多个轴代表多个维度，不同颜色线代表不同的变量，轴上的点组成的面积形状代表整体衡量。

局限：不适用于低维场景，一般维数大于4，也不适用于变量太多的场景。

8 漏斗图

漏斗图（funnel chart）类似于漏斗的形状，其中每个部分逐渐变窄。分段垂直排列，以显示层次结构。在漏斗图中，每个分段对应于顺序过程中的一个步骤或阶段。它们说明了数据点在各个阶段中的进展。

数据类型：具有阶段性的类别 使用场景：流程的处理，例如销售、转化和客户旅程等。 表达形态：每个递减的梯形代表一个类别的阶段，每个梯形的比例宽度代表了该类别的值。

局限：不适合数据连续的场景，以及非单一顺序流程

对于连续型的多变量，一般应用于时间序列分析。

9 线状图

线状图（line chart）把特定时间单位内的变量值以点的形式标在坐标系中，并连点成线。

数据类型：时间序列的数据 使用场景：表达数据的趋势 表达形态：点线形式，横轴表达时间，纵轴表达数据的值

局限：不适用于数据之间没有关系或没有逻辑顺序

面积图

面积图（area chart）是线状图的扩展，又称区域图，强调数量随时间而变化的程度，也可用于引起人们对总值趋势的注意。

数据类型：多个连续的变量 使用场景：数据随时间的大小或容量变化 表达形态： 现状图的变体，线与横轴之间的面积强调了变量的体积或大小。

局限：不适用于多变量序列有交叉重叠的场景

10 热力图

热力图（heatmap）又称热图，以特殊高亮的形式显示某一区域。对于一般网站而言，常见热图共有点击热图、注意力热图、分析热图、对比热图、分享热图、浮层热图和历史热图等七种。

数据类型：多个连续的变量 使用场景：以颜色密度表达变量之间的关系，典型的是两个变量之间的关系 表达形态：两个变量分别是x、y轴，颜色深浅代表对应点的值的大小。

局限：不适用于变量无关的场景，以及离散变量及其对比。

在dashboard的设计中，有太多的可视化图例可以选择，而且很方便通过echart等前端库来实现。