图表用法¶
比较类¶
柱状图¶
柱状图的简介¶
基础柱状图，使用垂直或水平的柱子显示类别之间的数值比较。其中一个轴表示需要对比的分类维度，另一个轴代表相应的数值。
柱状图有别于直方图，柱状图无法显示数据在一个区间内的连续变化趋势。柱状图描述的是分类数据，回答的是每一个分类中『有多少？』这个问题。 需要注意的是，当柱状图显示的分类很多时会导致分类名层叠等显示问题，下面我们会举例说明。
英文名：Basic Column Chart, Basic Bar Chart
柱状图的构成¶
-
纵向柱状图
图表类型 纵向柱状图 适合的数据 列表：一个分类数据字段、一个连续数据字段 功能 对比分类数据的数值大小 数据与图形的映射 分类数据字段映射到横轴的位置
连续数据字段映射到矩形的高度
分类数据也可以设置颜色增强分类的区分度适合的数据条数 不超过 12 条数据 -
横向柱状图 （条形图）
图表类型 横向柱状图 适合的数据 列表：一个分类数据字段、一个连续数据字段 功能 对比分类数据的数值大小 数据与图形的映射 分类数据字段映射到纵轴的位置
连续数据字段映射到矩形的宽度适合的数据条数 不超过 30 条数据
柱状图的应用场景¶
-
适合的场景
例子1：适合应用到分类数据对比
下图是一个游戏销量的图表，展示不同游戏类型的销量对比。
genre（游戏类型） sold（销售量） Sports 27,500 Strategy 11,500 Action 6,000 Shooter 3,500 Other 1,500 
-
不适合的场景
例子1：分类太多不适合使用纵向柱状图
如对比不同省份的人口数量。分类情况过多时，柱状图的文本为了排布合理，需要进行旋转，不利于阅读，相比于纵向柱状图，横向柱状图更适用于此类分类较多的场景。
province（省份） population（人口数量） 北京市 19612368 天津市 12938693 河北省 71854210 ... ... 
使用横向柱状图，文本可以横向排布，便于用户的阅读，效果如下：
例子2：不适合表示趋势
柱状图使用矩形的长度（宽度）来对比分类数据的大小，非常方便临近的数据进行大小的对比，不适合展示连续数据的趋势。下图本想展示 ACME 这只股票在 2015 年 9 月份整个月的每日的价格走势，但是效果不尽人意。
随着有序的时间变化的数值趋势，更适合使用折线图或者面积图。
柱状图与其他图表的对比¶
柱状图和折线图、饼图:
- 柱状图主要用于多个分类间的数据（大小、数值）的对比
- 折线图主要用于展示连续数值（例如时间）或者有序分类的变化趋势
- 饼图主要是展示分类之间的占比情况
柱状图和南丁格尔图（玫瑰图）：
- 南丁格尔图（玫瑰图）通过半径的大小来对比数据
- 柱状图根据矩形的长度来对比数据
变形¶
直方图 分组柱状图 堆叠柱状图 玉珏图
双向柱状图¶
双向柱状图的简介¶
双向柱状图（又名正负条形图），使用正向和反向的柱子显示类别之间的数值比较。其中分类轴表示需要对比的分类维度，连续轴代表相应的数值，分为两种情况，一种是正向刻度值与反向刻度值完全对称，另一种是正向刻度值与反向刻度值反向对称，即互为相反数。
英文名：Bi-directional Bar Chart, Bi-directional Column Chart
双向柱状图的构成¶
| 图表类型 | 双向柱状图 |
|---|---|
| 适合的数据 | 列表：一个分类数据字段、两个连续数据字段 |
| 功能 | 对比分类数据的数值大小 |
| 数据与图形的映射 | 分类数据字段映射到分类轴的位置 一个连续数据字段映射到正向矩形的长度、另一个连续数据字段映射到反向矩形的长度、正反向数据可以设置颜色或形状(shape)增强区分度、分类数据可以设置颜色增强分类的区分度 |
| 适合的数据条数 | 横向不超过 30 条数据、纵向不超过 12 条数据 |
双向柱状图的应用场景¶
-
适合的场景
例子1: 正反分类数据对比
下图是模拟某个公司各个部门对某项任务的完成情况数据的对比图，完成人数使用正向柱状图表示、未完成人数使用反向柱状图表示。
部门 小组 完成人数 未完成人数 部门0 组名0 37 9 ... ... ... ... 说明：
- 使用了
颜色用于区分不同的部门 - 使用两
形状（空心和实心）用于区分完成人数和未完成人数 - 使用了
位置用于区分不同小组
- 使用了
-
不适合的场景
双向柱状图不适合不含相反含义的数据
双向柱状图的扩展¶
例子1: 层叠双向柱状图
下图展示了不同类型的人群对某个问题的同意程度的统计数据，分为非常不同意、不同意、没意见、同意和非常同意五种程度，其中非常不同意和不同意作为反向柱状图，不同程度用不同颜色来表示。
| type | Strongly Agree | Agree | No Opinion | Disagree | Strongly Disagree |
|---|---|---|---|---|---|
| All Survey Responses | 50.1 | 40.7 | 4.8 | 3.7 | 0.7 |
| ... | ... | ... | ... | ... | ... |
例子2: 分组双向柱状
下图展示了通过收入数据和支出数据绘制出包含净利润的分组双向柱状图。
| time | 收入 | 支出 |
|---|---|---|
| 周一 | 130 | -54 |
| ... | ... | ... |
双向柱状图与其他图表的对比¶
双向柱状图和柱状图
- 柱状图只能绘制在同一个坐标轴内，每个柱子只能表示一个数据
- 双向柱状图包含正向和反向两个坐标轴，每个柱子可以表示一个正向数据和一个反向数据
变形¶
柱状图 分组柱状图 堆叠柱状图 玉珏图
气泡图¶
气泡图的简介¶
气泡图是一种多变量图表，是散点图的变体，也可以认为是散点图和百分比区域图的组合。
气泡图最基本的用法是使用三个值来确定每个数据序列，和散点图一样，气泡图将两个维度的数据值分别映射为笛卡尔坐标系上的坐标点，其中 X 和 Y 轴分别代表不同的两个维度的数据，但是不同于散点图的是，气泡图的每个气泡都有分类信息（他们显示在点旁边或者作为图例）。每一个气泡的面积代表第三个数值数据。另外还可以使用不同的颜色来区分分类数据或者其他的数值数据，或者使用亮度或者透明度。表示时间维度的数据时，可以将时间维度作为直角坐标系中的一个维度，或者结合动画来表现数据随着时间的变化情况。
气泡图通常用于比较和展示不同类别圆点（这里我们称为气泡）之间的关系，通过气泡的位置以及面积大小。从整体上看，气泡图可用于分析数据之间的相关性。
需要注意的是，气泡图的数据大小容量有限，气泡太多会使图表难以阅读。但是可以通过增加一些交互行为弥补：隐藏一些信息，当鼠标点击或者悬浮时显示，或者添加一个选项用于重组或者过滤分组类别。
另外，气泡的大小是映射到面积而不是半径或者直径绘制的。因为如果是基于半径或者直径的话，圆的大小不仅会呈指数级变化，而且还会导致视觉误差。
英文名：Bubble Chart
气泡图的构成¶
| 图表类型 | 气泡图 |
|---|---|
| 适合的数据 | 三个连续字段，一个分类字段 |
| 功能 | 观察数据的分布情况 对比各个分类字段对应的数值大小 |
| 数据与图形的映射 | 两个连续字段分别映射到横轴和纵轴 第三个连续字段映射到气泡大小 分类字段映射到颜色。 |
| 适合的数据条数 | 暂无限制 |
气泡图的应用场景¶
一、分类对比数据
气泡图可用于显示分类数据，这种情况下，相比于柱状图它能达到更美观的目的。
如下图所示，分别使用柱状图和气泡图展示了不同年龄段人群中有使用社交网络的数量占比。在气泡图中，使用气泡的大小来映射数据的大小，而柱状图中使用高度来代表，颜色代表不同的年龄段。相比于高度，面积的映射更直观。
虚构数据
二、多变量映射，用于分析数据的相关性
气泡图作为散点图的变体，也可用于探索分析数据的相关性，在散点图的基础上，还可新增一至两个维度（映射至气泡的大小和颜色）。
在下图中，通过将销售量映射为气泡的大小，这样我们就可以很清晰得看出不同季度下广告支出和销售量之间的关系，从各个季度的数据看，广告支出越多销售量越大，两者呈正相关关系，在这里只是举一个例子，实际情况下还需要以更多的数据来进行分析。
其中 x 轴代表时间，y 轴为广告支出，气泡大小表示销售量。虚构数据
| time（季度） | adSpend（广告支出） | sales（销售额） |
|---|---|---|
| Q1 | 120 | 345 |
| Q2 | 350 | 500 |
| Q3 | 480 | 666 |
| Q4 | 370 | 549 |
除了大小的映射之外，我们还可以为每个气泡添加上颜色属性，这时候气泡图就为我们完美得展示了四个维度的数据。通常颜色属性用于表达数据的分类。
下图展示了各大洲各个国家人均国内生产总值、人均寿命以及人口的数据。其中横坐标表示人均国内生产总值，纵坐标表示人均寿命，气泡的大小表示人口数量，然后用颜色来区分各个洲。可以看出人均国内生产总值和人均寿命的相关性，大致呈正相关性，并且人均寿命较长的地区主要集中在亚洲、欧洲和大洋洲。亚洲的人口较多。数据来源丢失，数据不可靠！
| continent（所属大洲） | Country（国家名） | LifeExpectancy（人均寿命） | GDP（人均国内生产总值$） | Population（人口总数） |
|---|---|---|---|---|
| Africa | Algeria | 72.301 | 6223.367465 | 33333216.0 |
| Americas | Colombia | 72.889 | 7006.580419 | 44227550.0 |
| Asia | China | 72.961 | 4959.114854 | 1318683096.0 |
| Europe | Austria | 79.829 | 36126.4927 | 8199783.0 |
| ... | ... | ... | ... | ... |
| Oceania | New Zealand | 80.204 | 25185.00911 | 4115771.0 |
三、与地图的结合（Bubble Map）
气泡图的另一个广泛用途，就是气泡图与地图的结合，即带气泡的地图，来展示具有地域特征的数据。具体详见Bubble Map，这里只简单展示一个例子。
如图，将各个国家遭受的恐怖袭击次数用气泡图来展示的效果。可以看出伊拉克遭受的恐怖袭击次数最多，并且恐怖袭击主要集中在中东地区。
气泡图的扩展阅读¶
变形¶
散点图
子弹图¶
子弹图的简介¶
子弹图的样子很像子弹射出后带出的轨道，所以称为子弹图。子弹图的发明是为了取代仪表盘上常见的那种里程表，时速表等基于圆形的信息表达方式。子弹图的特点如下：
- 每一个单元的子弹图只能显示单一的数据信息源
- 通过添加合理的度量标尺可以显示更精确的阶段性数据信息
- 通过优化设计还能够用于表达多项同类数据的对比
- 可以表达一项数据与不同目标的校对结果
子弹图无修饰的线性表达方式使我们能够在狭小的空间中表达丰富的数据信息，线性的信息表达方式与我们习以为常的文字阅读相似，相对于圆形构图的信息表达，在信息传递上有更大的效能优势。
英文名：Bullet Graph
子弹图的构成¶
| 图表类型 | 子弹图 |
|---|---|
| 适合的数据 | 列表：一个分类数据字段、一个连续数据字段、一个范围数组字段、一个目标字段 |
| 功能 | 对比分类数据的数值大小、所处区间以及是否达标 |
| 数据与图形的映射 | 分类数据字段映射到分类轴位置 连续数据字段映射到数据条的长度 目标字段映射到测量标记的刻度轴位置 范围数组映射到背景色条的大小 |
| 适合的数据条数 | 不超过10条数据 |
子弹图的应用场景¶
-
适合的场景
例子1: 显示阶段性数据信息
下图是一个模拟商铺一段时间内的经营情况的数据，一共 5 条数据，分别代表收入（单位：千美元）、利率（单位：％）、平均成交额（单位：美元）、新客户（单位：个）和满意度（1-5）五个方面，每个方面都有代表好、中、差的 3 个范围和预先设定的目标。
title ranges actual target subtitle Revenue [150,225,300] 270 250 US$, in thousands ... ... ... ... ... 
说明：
- title 字段，用于区分不同的类型
- ranges 字段，使用背景色条的长度，表示区间范围
- actual 字段，使用数据条的长度，表示实际数值
- target 字段，使用测量标记的刻度轴位置，表示目标值
子弹图的扩展¶
例子1：反向子弹图
表达负面（消极）数据时，可以将子弹图做方向上的反转。下图用反向子弹图表示开销的多少。
| title | ranges | actual | target |
|---|---|---|---|
| Revenue | [1000,2000,5000] | 1700 | 1500 |
例子2：层叠子弹图
表达一些阶段性的数据时，例如，我们定义了全年的定额目标，但是每个季度都会阶段性地显示当前完成的进度，此时就需要同时表达每个季度的数据和全年整体的定额目标数据。
| State | 第一季度 | 第二季度 | 第三季度 | 第四季度 | ranges | target |
|---|---|---|---|---|---|---|
| 年度收益 | 3820 | 6080 | 2930 | 5390 | [12000,15000,20000] | 16000 |
子弹图与其他图表的对比¶
子弹图和柱状图
- 柱状图主要用于多个分类间的数据（大小、数值）的对比
- 子弹图主要用于各个分类间各自的数值所处状态与测量标记的对比，突出的是每个分类自身的情况，没有分类间的比较，用于展示各个分类的子弹图单元相对独立。
变形¶
柱状图 分组柱状图 堆叠柱状图 玉珏图
色块图¶
色块图的简介¶
色块图，由小色块有序且紧凑的组成的图表。色块图的最大好处是，2 维画布上的空间利用率非常高。理论上小色块的大小是可以等于硬件像素的大小。想象一下，如果用每个像素直接编码数值，一块200px*200px的小屏幕，也可以最多编码40000子项！
所以色块图特别适合用于直接对数据量较大的、相对原始的数据进行分析。比如：生物基因科学领域，色块图常被用于微阵列数据分析。
另外，关于颜色的用法有两点需要强调一下：
- 如果是应对展示用的场景，数据量不大、颜色分类数量小于或等于7个，可以采用分类的颜色映射。
- 如果应对分析相关的需求，为了更有效率的使用色块图，我们建议使用连续（渐变）的颜色映射数值。由于人眼对颜色的分辨力有限，所以用于编码的颜色不宜过多，我们推荐的颜色的数量在 3～11 个之间。
英文：Heatmap
色块图的构成¶
| 图表类型 | 色块图 |
|---|---|
| 适合的数据 | 两个分类字段，一个连续字段 |
| 功能 | 对比两个分类字段对应的数值大小 展示两个分类字段对应的数值 分布 |
| 数据与图形的映射 | 两个分类数据字段分别映射到横轴和纵轴，一个数值或分类字段映射到颜色。 |
| 适合的数据条数 | 超过30条数据，不超过区域所含屏幕像素个数的数据量 |
色块图的应用场景¶
-
适合的场景
例子1: 适合应用到数据展示
下图是模拟的杭州地铁票价图。
说明：
- 站名映射到了
x、y轴，以确定位置 - 票价映射到
颜色 - 票价数据是模拟的，仅表示大概情况
例子2: 适合应用到简单的数据分析
2015年，全年股指的波动情况。
说明：
- 将某月
星期几映射到x轴，第几个星期映射到y轴 - 股指映射到
颜色，从绿到黄到红，表示股指从低到高 - 对
月份进行分面
例子3: 适合应用到聚类分析
下图是用于基因芯片的聚类分析的
分群色块图
说明：（令x轴基因片段为A组，y轴基因片段为B组）
- 将A组基因名，映射到
x轴，将B组基因名，映射到y轴 - 将A组基因表达程度映射为
红色，B组程度基因表达映射为绿色，基因的表达程度映射为亮度和饱和度 - 通过算法将相似度高的基因分组，将关系画成树图
- 站名映射到了
色块图与其他图表的对比¶
色块图和热力图
- 数据类型上看：热力图是用两个
连续字段确定数值点的位置，色块图是用两个分类字段确定数值点的位置。 - 功能上看：热力图主要用于展示数据的
分布情况，色块图在观察数据分布以外，还能进行列对比和行对比。
漏斗图¶
漏斗图的简介¶
漏斗图适用于业务流程比较规范、周期长、环节多的单流程单向分析，通过漏斗各环节业务数据的比较能够直观地发现和说明问题所在的环节，进而做出决策。漏斗图用梯形面积表示某个环节业务量与上一个环节之间的差异。漏斗图从上到下，有逻辑上的顺序关系，表现了随着业务流程的推进业务目标完成的情况。
漏斗图总是开始于一个100%的数量，结束于一个较小的数量。在开始和结束之间由N个流程环节组成。每个环节用一个梯形来表示，梯形的上底宽度表示当前环节的输入情况，梯形的下底宽度表示当前环节的输出情况，上底与下底之间的差值形象的表现了在当前环节业务量的减小量，当前梯形边的斜率表现了当前环节的减小率。 通过给不同的环节标以不同的颜色，可以帮助用户更好的区分各个环节之间的差异。漏斗图的所有环节的流量都应该使用同一个度量。
英文名：Funnel Chart
漏斗图的构成¶
| 图表类型 | 漏斗图 |
|---|---|
| 适合的数据 | 一个分类数据字段、一个连续数据字段 |
| 功能 | 对比分类数据的数值大小 |
| 数据与图形的映射 | 分类数据字段映射到颜色 连续数据字段映射到梯形的面积 |
| 适合的数据条数 | 不超过12条数据 |
漏斗图的应用场景¶
-
适合的场景
例子：适用于流程流量分析。
随着流程的推进，每个环节所要达成的成功数量在减少。最终的成交量是企业想要达成的交易数量。通过将各个流程中数量的信息画入漏斗图可以清晰的分析到哪个环节是当前业务流程中的薄弱环节，哪个环节是流量转化的瓶颈，进而帮助人们更加专注于薄弱环节提高整个流程的产出。
从上图中我们发现，浏览环节中的业务量呈现了明显的缩减的趋势，转化率较低。所以决策者应该将更多的资源与精力投入到浏览这个环节的工作中，进而提高整个流程的效率。
-
不适合的场景
漏斗图不适合表示无逻辑顺序的分类对比，如果要表示无逻辑顺序的分类对比情况，请使用柱状图。漏斗图也不适合表示占比情况，如果要表示占比情况，请使用饼图。
例子：某游戏销量对比。
下图是一个游戏销量的图表，展示不同游戏类型的销量对比，用柱状图合适，用漏斗图不合适。
错误：
正确：
漏斗图的扩展¶
扩展图表一：金字塔图
含义与用法与漏斗图基本类似，唯一区别是头部变尖。如果有定制化需求可利用该拓展。
扩展图表二：对比漏斗图
对比漏斗图比基本漏斗图除了传达了流程的含义外，还传达了预期和实际情况的对比的含义，如下图：
扩展图表三：对称漏斗图
对称漏斗图可以同时对两个业务流程进行分析，同时可以对这两个业务流程之间进行对比，如下图：
直方图¶
直方图的简介¶
直方图，形状类似柱状图却有着与柱状图完全不同的含义。直方图牵涉统计学的概念，首先要对数据进行分组，然后统计每个分组内数据元的数量。 在平面直角坐标系中，横轴标出每个组的端点，纵轴表示频数，每个矩形的高代表对应的频数，称这样的统计图为频数分布直方图。频数分布直方图需要经过频数乘以组距的计算过程才能得出每个分组的数量，同一个直方图的组距是一个固定不变的值，所以如果直接用纵轴表示数量，每个矩形的高代表对应的数据元数量，既能保持分布状态不变，又能直观的看出每个分组的数量。本文的例子全部使用纵轴表示数量的非标准直方图绘制。
相关概念：
- 组数：在统计数据时，我们把数据按照不同的范围分成几个组，分成的组的个数称为组数
- 组距：每一组两个端点的差
- 频数：分组内的数据元的数量除以组距
直方图的作用
- 能够显示各组频数或数量分布的情况
- 易于显示各组之间频数或数量的差别
通过直方图还可以观察和估计哪些数据比较集中，异常或者孤立的数据分布在何处
英文名：Histogram
直方图的构成¶
频数分布直方图
| 图表类型 | 直方图 |
|---|---|
| 适合的数据 | 列表：一个连续数据字段、一个分类字段（可选） |
| 功能 | 展示数据在不同区间内的分布情况 |
| 数据与图形的映射 | 分组数据字段（统计结果）映射到横轴的位置 频数字段（统计结果）映射到矩形的高度 分类数据可以设置颜色增强分类的区分度 |
| 适合的数据条数 | 不低于 50 条数据 |
非标准的直方图
| 图表类型 | 直方图 |
|---|---|
| 适合的数据 | 列表：一个连续数据字段、一个分类字段（可选） |
| 功能 | 展示数据在不同区间内的分布情况 |
| 数据与图形的映射 | 分组数据字段（统计结果）映射到横轴的位置 数量字段（统计结果）映射到矩形的高度 分类数据可以设置颜色增强分类的区分度 |
| 适合的数据条数 | 不低于 50 条数据 |
直方图的应用场景¶
-
适合的场景
例子1: 用于表示分布情况
以统计学中经典的鸢尾花案例为例，其数据集包含了 50 个样本，都属于鸢尾属下的三个亚属，分别是山鸢尾、变色鸢尾和维吉尼亚鸢尾。四个特征被用作样本的定量分析，它们分别是花萼长度、花萼的宽度、花瓣的长度和花瓣的宽度。基于这四个特征的集合，费雪建立了一种线性判别分析法以确定其属种。
SepalLength（花萼长度） SepalWidth（花萼宽度） PetalLength（花瓣长度） PetalWidth（花瓣宽度） Species（属种） 5.1 3.5 1.4 0.2 setosa 4.9 3.0 1.4 0.2 setosa ... ... ... ... ... 7.0 3.2 4.7 1.4 versicolor 6.4 3.2 4.5 1.5 versicolor ... ... ... ... ... 6.3 3.3 6.0 2.5 virginica 5.8 2.7 5.1 1.9 virginica ... ... ... ... ... 
例子2: 用于观察异常或孤立数据
下图绘制了钻石的全深比数据的统计直方图，从图中可以看出在 66 附近有两个孤立值
name(钻石名称) depth(全深比) 14513 61.4 28685 64 50368 59.2 ... ... 
-
不适合的场景
抽取的样本数量过小，将会产生较大误差，可信度低，也就失去了统计的意义。因此，样本数不应少于 50 个。
直方图的扩展¶
通过变换坐标系，我们能获得极坐标下的直方图、圆环上的直方图、以及翻转的直方图。
直方图与其他图表的对比¶
直方图与柱状图
- 柱状图是以矩形的长度表示每一组的频数或数量，其宽度(表示类别)则是固定的，利于较小的数据集分析。
- 直方图是以矩形的长度表示每一组的频数或数量，宽度则表示各组的组距，因此其高度与宽度均有意义，利于展示大量数据集的统计结果。
- 由于分组数据具有连续性，直方图的各矩形通常是连续排列，而柱状图则是分开排列。
直方图的扩展阅读¶
- 线性判别分析
- The Data Visualisation Catalogue
- 直方图百科
变形¶
柱状图
K 线图¶
K 线图的简介¶
K 线图，原名蜡烛图，又称阴阳图、棒线、红黑线或蜡烛线，常用于展示股票交易数据。K 线就是指将各种股票每日、每周、每月的开盘价、收盘价、最高价、最低价等涨跌变化状况，用图形的方式表现出来。
K 线如图所示:
- 最上方的一条细线称为上影线，中间的一条粗线为实体，下面的一条细线为下影线。
- 当收盘价高于开盘价，也就是股价走势呈上升趋势时，我们称这种情况下的 K 线为阳线，中部的实体以空白或红色表示。反之称为阴线用黑色实体或绿色表示。
- 上影线的长度表示最高价和收盘价之间的价差，实体的长短代表收盘价与开盘价之间的价差，下影线的长度则代表开盘价和最低价之间的差距。
英文名：K Chart, Candlestick Chart
K 线图的构成¶
| 图表类型 | K 线图 |
|---|---|
| 适合的数据 | 一个时间数据字段，五个连续字段 |
| 功能 | 观察数据的变化趋势 对比分类数值大小 |
| 数据与图形的映射 | 一个连续字段映射到横轴数值（通常是日期） 另外四个连续字段映射到纵轴 一个分类字段映射到颜色 |
| 适合的数据条数 | 暂无限制 |
K 线图的应用场景¶
-
适合场景
K 线图主要用于金融领域里展示股票，期货等交易数据，按照时间维度分为日 K 线、周 K 线、月 K 线。展示的数据需要满足 K 线构成的四要素：即开盘价、收盘价、最高价、最低价。
例子1：下图结合区域选择插件，展示了“湖南天雁”股票 2015 年 1 月 5 日至 2015 年 11 月 19 日的日 K 线图。
卡吉图¶
卡吉图的简介¶
卡吉图大约发明于 19 世纪 70 年代日本股票市场开始交易的时候。在美国，史蒂文·尼森出版《烛形图之外》后，卡吉图分析法随之流行。由于能够清晰、有效的显示价格走势的路径，卡吉图是投资者用于对股票做出更好决策的图表之一。
卡吉图是一系列由短水平线连接的垂直线，水平线起连接作用，垂直线的厚度和方向取决于价格运动。垂直线方向向上代表价格上升，方向向下代表价格下降，当价格运动方向反转超过阈值时绘制一条新的垂直线，在转折处用水平线相连。当价格上升超过前一个高点转折时采用粗线绘制，称为阳线，当价格下降低于前一个低点转折时采用细线绘制，称为阴线。
- 卡吉图模拟了证券的供给与需求力量的关系，非常适用于股票短线操作
- 卡吉图通过阈值标记逆转，交易者可以过滤掉日常价格波动，只关注价格的显著变化。
卡吉图独立于时间。
注意：卡吉图绘制的折线是经过卡吉图算法计算之后的，与原数据曲线有区别
英文名：Kagi Graph
卡吉图的构成¶
| 图表类型 | 卡吉图 |
|---|---|
| 适合的数据 | 一个分类数据字段，一个连续字段 |
| 功能 | 观察数据变化趋势 |
| 数据与图形的映射 | 转折点的（时间）分类（自动计算）映射到横轴，转折点的值映射到纵轴 |
| 适合的数据条数 | 大于 10 条 |
卡吉图的应用场景¶
-
适合的场景
例子1：展示价格或股票变化走势。 例如在股票市场上，将股票(或指数)的逐日收市价使用卡吉图来表示，用来展示股市大致上的趋势。下图展示了 ACME 这只股票在 2015 年 9 月份的每日的价格走势。数据来源：AnyChart
-
不适合的场景
例子1：对时间敏感的数据
卡吉图与时间无关，只表示数据上升下降的走势，无法体现数据再时间上的一些特性，例如周期等。特别时当数据对时间敏感时不推荐用卡吉图 下图使用卡吉图绘制了 G2 官网 2016 年 5 月 13 日至 2016 年 10 月 28 日的日浏览次数，从图中可以看出两次访问量较高的转折线，但无法确定其具体时间点，也无法看出数据的周期性，周期性数据推荐使用螺旋图
多组数据
卡吉图的横坐标具有特殊性，无法在同一个横轴上绘制多组卡吉图
卡吉图与其他图表的对比¶
卡吉图和k线图
- 卡吉图独立于时间，仅用于表现数据的走势
- k线图与时间相关，用于表现一段时间内的数据涨跌变化情况
卡吉图与折线图
- 卡吉图是将原数据经过一系列算法计算后得到的数据走势路径，横、纵坐标也不再是原数据对应的值
- 卡吉图的颜色和粗细代表了特定的含义
- 折线图严格按照原数据的横坐标和纵坐标绘制，可以绘制多组数据
变形¶
折线图
折线图¶
折线图的简介¶
折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化，它的特点是反映事物随时间或有序类别而变化的趋势。
在折线图中，数据是递增还是递减、增减的速率、增减的规律（周期性、螺旋性等）、峰值等特征都可以清晰地反映出来。所以，折线图常用来分析数据随时间的变化趋势，也可用来分析多组数据随时间变化的相互作用和相互影响。例如可用来分析某类商品或是某几类相关的商品随时间变化的销售情况，从而进一步预测未来的销售情况。在折线图中，一般水平轴（X轴）用来表示时间的推移，并且间隔相同；而垂直轴（Y轴）代表不同时刻的数据的大小。
英文名：Line Chart
折线图的构成¶
| 图表类型 | 折线图 |
|---|---|
| 适合的数据 | 两个连续字段数据，或者一个有序的分类一个连续数据字段 |
| 功能 | 观察数据的变化趋势 |
| 数据与图形的映射 | 两个连续字段分别映射到横轴和纵轴 |
| 适合的数据条数 | 单条线的数据记录数要大于2，但是同一个图上不要超过5条折线 |
一个折线图的构成包括：
- 横轴：表示时间
- 纵轴：表示数值
- 点：表示各个数据的位置
- 线：连接各个数据点
折线图的应用场景¶
-
适合的场景
例子1：有序的因变量，比如：时间。
下图是某监控系统的折线图表，显示了请求次数和响应时间随时间的变化趋势。
横轴表示时间，因为需要同时展示请求次数和响应时间这两组数据，所以添加了两个垂直坐标轴。折线图可以很好地表现数据递减、增减的速率、增减的规律、峰值等特征。
time（时间） requestCount（请求次数） avgRt（响应时间） 9:00 32215.0 45207.51 9:05 29422.0 32978.0 ... ... ... 
例子2：不同月份的温度
month temperature Jan 7.0 Feb 6.9 Mar 9.5 。。。 。。。 
注意：
- month：月份是有序的分类，映射到位置来区分不同的月份
- temperature: 是连续的数据值，映射到位置来对比不同的月份的温度
-
不适合的场景
当水平轴的数据类型为无序的分类或者垂直轴的数据类型为连续时间时，不适合使用折线图。
我们以一个不同游戏类型的销量对比的场景为例，对于表示分类对比的数据时，我们更应该使用柱状图，而不是折线图。
错误
正确
当折线的条数过多时不建议将多条线绘制在一张图上，下图展示了多台机器（实例）的资源占用情况
注意：
- 如果业务目的是查看某台机器（实例）异常（区别于其他机器的资源占用）时，这个图可以满足需求
- 如果业务目的是查看具体的某台机器的资源占用时，这个图很难看清楚，不建议同时显示多条折线，可以控制仅显示一条线来解决这个问题
折线图的扩展
为了视觉的美观可以将折线转换成平滑曲线
折线图与其他图表的对比¶
折线图和柱状图
- 柱状图主要用于多个分类间的数据（大小、数量）的对比，折线图主要用于时间或者连续数据上的趋势。
- 分类间的数据比较，如果分类不存在顺序，那么不要使用折线图。
折线图和面积图¶
- 折线图和面积图都可以表示一段时间（或者有序分类）的趋势，相比之下面积图的表现力更强一些
- 面积图还可以表示数据的上下限，例如可以表示温度的最小值、最大值
变形¶
面积图 堆叠面积图
马赛克图¶
马赛克图简介¶
马赛克图(Mosaic Plot 又名 Marimekko Chart)。标准的、非均匀的马赛克图在现实生活中使用较少，多用于统计学领域，常用于SAS的某些模块。均匀的马赛克图在生活中常有应用，比较经典的例子是地铁站与站之间的票价图。
注意：标准的马赛克图关注的数据维度非常多，一般的用户很难直观的理解。一般情况下，我们推荐您只使用均匀的马赛克图。对于非均匀的马赛克图，多数情况下可以拆解成多个不同的图表。
马赛克图的构成¶
非均匀坐标轴马赛克图
坐标轴非均匀的马赛克图也是统计学领域标准的马赛克图，一个非均匀的马赛克图包含以下构成元素：
- 非均匀的分类坐标轴。
- 面积、颜色均有含义的矩形块。
- 图例。
均匀坐标轴马赛克图
坐标轴均匀的马赛克图也是统计学领域标准的马赛克图，一个均匀的马赛克图包含以下构成元素：
- 均匀的分类坐标轴。
- 颜色均有含义的矩形块。
- 图例。
马赛克图的应用场景¶
-
适合的场景
统计分析，非均匀马赛克图
下图是泰坦尼克号死者关于性别和舱位等级的分布情况。
Class（仓位等级） Sex（性别） Die（死亡人数） Survived（存活人数） 1st Female 4 140 1st Male 118 57 2nd Female 13 80 2nd Male 154 14 3rd Female 89 76 3rd Male 387 75 
统计分析，均匀马赛克图
下图是一组人群的BMI数据，关于身高和体重的分布。
Height(身高 cm) Weight(体重 kg) BodyFatSiriBEqu(BMI 指数) 172.085 69.96662 12.3 183.515 78.58488 6.1 168.275 69.85322 25.3 ... ... ...
马赛克图与其他图表的对比¶
马赛克图和热力图
-
从图形属性上：
- 热力图表示第三维度的颜色是线性变化的。
- 马赛克图表示第三维度的颜色是分类的。
- 标准热力图要经过平滑算法，没有明显的边界。
- 马赛克图拥有清晰的边界。
-
从数据上看：
- 均匀的马赛克图和热力图在连续数据上的含义非常相似。
-
从分析需求上看：
- 热力图侧重于分布，可预测未知区域数据。
- 马赛克图拥有更清晰的边界，更侧重于对比。
马赛克图的扩展阅读¶
- A Brief History of the Mosaic Display
- Are Mosaic Plots Worthwhile
- Marimekko Charts
- Marimekko Charts FusionChart
- Marimekko Charts The Data Visualisation Catalogue
- Marimekko Charts in Microsoft Excel
分组柱状图¶
分组柱状的简介 分组柱状图，又叫聚合柱状图。当使用者需要在同一个轴上显示各个分类下不同的分组时，需要用到分组柱状图。
跟柱状图类似，使用柱子的高度来映射和对比数据值。每个分组中的柱子使用不同的颜色或者相同颜色不同透明的方式区别各个分类，各个分组之间需要保持间隔。
分组柱状图经常用于不同组间数据的比较，这些组都包含了相同分类的数据。
但是仍需要注意，避免分组中分类过多的情况，分类过多会导致分组中柱子过多过密，非常影响图表可读性。
英文名：Multi-set Bar Chart, Grouped Bar Chart
分组柱状图的构成
图表类型 分组柱状图 适合的数据 列表：两个分类数据字段、一个连续数据字段 功能 其中一个分类数据字段作为分组，可以对比相同分组下不同分类的数据大小，也可以对比不同分组下，相同分类的数据大小 数据与图形的映射 其中一个分类数据字段映射到坐标轴的位置用于分组，另一个分类数据在同一个分组内错开，并通过不同的颜色来区分连续数据字段映射到矩形的长度 适合的数据条数 分组个数不要超过 12 个，每个分组下的分类不要超过 6 个 分组柱状图的应用场景 适合的场景 例子1：对比不同分组内相同分类的大小，对比相同分组内不同分类的大小
下图对比了『我是土豪』游戏公司在 2001、2002、2003 这三年的各类游戏的销量情况。 水平轴显示的是不同的游戏类型，每种游戏类型作为一个柱状图的分组，在每一个分组内对比不同年份的销售数量。
year（年份） genre（游戏类型） sold（销售量） 2001 Sports 27,500 2001 Strategy 11,500 2001 Action 6,000 ... ... ... 2002 Action 8,000 2002 Shooter 4,500 2002 Other 1,800 ... ... ... 说明：
genre，使用横轴的位置来区分不同的游戏类型 year，使用颜色和在同一个游戏类型内的错开的位置，来区分不年份的游戏销售 sold，使用矩形的长度对比不同游戏、不同年份的销量 不适合的场景 例子1：分组过多、分类过多
下图展示了美国二十个州不同年龄段的人口数据分布情况。 我们以州为维度进行分组，每个分组内划分七个年龄段，垂直坐标轴表示人口数量。
上图由于分组和分类过多导致柱子过多过密，可读性不佳。推荐使用堆叠柱状图，当数据更多时，可将纵向柱状图改为横向柱状图，详见堆叠柱状图的的扩展
分组柱状图和其他图表的对比 分组柱状图和一般柱状图 分组柱状图可以增加一个维度，用于对比一组数据内不同分类的数据值大小，可以表示3个数据字段（维度）的数据，而一般柱状图只能表示 2 个数据字段（维度） 分组柱状图的柱子较多，所以能展示的分组较少 分组柱状图和堆叠柱状图 分组柱状图，可以对比同一个分组内部不同分类的数据大小，也可以对比不同分组内相同分类的数据大小，但无法对比各分组的总量 堆叠柱状图，可以对比同一个分组内部不同分类的数据大小或占比，也可以对比分组的总量，但不适合对比不同分组内相同分类的数据大小 变形 柱状图 堆叠柱状图
饼图¶
饼图的简介 饼图广泛得应用在各个领域，用于表示不同分类的占比情况，通过弧度大小来对比各种分类。饼图通过将一个圆饼按照分类的占比划分成多个区块，整个圆饼代表数据的总量，每个区块（圆弧）表示该分类占总体的比例大小，所有区块（圆弧）的加和等于 100%。
饼图可以很好地帮助用户快速了解数据的占比分配。它的主要缺点是：
饼图不适用于多分类的数据，原则上一张饼图不可多于 9 个分类，因为随着分类的增多，每个切片就会变小，最后导致大小区分不明显，每个切片看上去都差不多大小，这样对于数据的对比是没有什么意义的。所以饼图不适合用于数据量大且分类很多的场景。 相比于具备同样功能的其他图表（比如百分比柱状图、环图），饼图需要占据更大的画布空间。 很难进行多个饼图之间的数值比较。 尽管如此，在一张饼图上比较一个数据系列上各个分类的大小占比还是很方便高效的。
英文名：Pie Chart
饼图的构成
图表类型 饼图 适合的数据 列表：一个分类数据字段、一个连续数据字段 功能 对比分类数据的数值大小 数据与图形的映射 分类数据字段映射到扇形的颜色 连续数据字段映射到扇形的面积 适合的数据条数 不超过 9 条数据 饼图的应用场景 适合的场景 例子1: 展示 2 个分类的占比情况。
下图是一个班级的男女生的占比情况：
gender（性别） count（人数） 男 30 女 20 例子2：多个但不超过 9 个分类的占比情况。
下图是一个游戏公司的销售情况：
genre（游戏类型） sold（销售量） Sports 27,500 Strategy 11,500 Action 6,000 Shooter 3,500 Other 1,500 不适合的场景 例子1：分类过多的场景
下图是各个省的人口的占比情况，因为这张图上包含的分类过多，就出现了简介中提到的问题，很难清晰对比各个省份的人口数据占比情况，所以这种情况下，我们推荐使用横向柱状图。
例子2: 分类占比差别不明显的场景
下图中游戏公司的不同种类的游戏的销售量相近，所以不太适合使用饼图，此时可以使用柱状图来呈现。
饼图与其他图表的对比 饼图和柱状图 饼图主要是展示分类之间的占比情况。 而柱状图主要展示各个分类数量、大小的对比。 饼图和南丁格尔玫瑰图 饼图通过弧度的大小来对比数据。 南丁格尔图通过半径的大小来对比数据。 变形 环图 南丁格尔玫瑰图
雷达图¶
雷达图的简介 雷达又叫戴布拉图、蜘蛛网图。传统的雷达图被认为是一种表现多维（4维以上）数据的图表。它将多个维度的数据量映射到坐标轴上，这些坐标轴起始于同一个圆心点，通常结束于圆周边缘，将同一组的点使用线连接起来就称为了雷达图。它可以将多维数据进行展示，但是点的相对位置和坐标轴之间的夹角是没有任何信息量的。在坐标轴设置恰当的情况下雷达图所围面积能表现出一些信息量。
每一个维度的数据都分别对应一个坐标轴，这些坐标轴具有相同的圆心，以相同的间距沿着径向排列，并且各个坐标轴的刻度相同。连接各个坐标轴的网格线通常只作为辅助元素。将各个坐标轴上的数据点用线连接起来就形成了一个多边形。坐标轴、点、线、多边形共同组成了雷达图。
着重要强调的是，虽然雷达图每个轴线都表示不同维度，但使用上为了容易理解和统一比较。使用雷达图经常会人为的将将多个坐标轴都统一成一个度量，比如：统一成分数、百分比等。这样这个图就退化成一个二维图了，事实上这种雷达图在日常生活更常见、更长用。 另外，雷达图还可以展示出数据集中各个变量的权重高低情况，非常适用于展示性能数据。
雷达图的主要缺点是：
(1) 如果雷达图上多边形过多会使可读性下降，使整体图形过于混乱。特别是有颜色填充的多边形的情况，上层会遮挡覆盖下层多边形。
(2) 如果变量过多，也会造成可读性下降，因为一个变量对应一个坐标轴，这样会使坐标轴过于密集，使图表给人感觉很复杂。所以最佳实践就是尽可能控制变量的数量使雷达图保持简单清晰。
英文名：Radar Chart, Spider Chart, Web Chart, Polar Chart, Star Plots
注意：
(1) 为了使概念尽可能简单，且贴近现今的使用习惯，下面我们暂时只介绍退化为二维的雷达图。
(2) 雷达图更注重于同类图表之间的对比（即雷达图与雷达图之间的对比）
雷达图的构成
图表类型 单组雷达图 适合的数据 一个分类字段，一个连续字段 功能 对比分类数据的数值大小 数据与图形的映射 分类字段映射到极坐标下角度标定的位置 连续字段映射到半径长度。 适合的数据条数 不超过30条
图表类型 单组雷达图 适合的数据 两个分类字段，一个连续字段 功能 对比分类数据的数值大小 数据与图形的映射 一个分类字段映射到极坐标下角度标定的位置 另一个分类字段映射到颜色 连续字段映射到半径长度。 适合的数据条数 不超过30*N条(N <= 8; N是雷达链分类数) 多维对比－单雷达链 世界经济论坛不久前还发布了全球竞争力指数报告，通过基本要求、效率增强器、创新与成熟因素等三个大方面对全球国家和地区进行竞争力评估。中国排名第28，得分4.89。通过雷达图，我们可以清晰看出中国在各个因素下的得分情况，进而进行分析。数据来源丢失，数据不可靠！
多组多维对比－多雷达链 常常表示由多个维度组成的能力衡量。
如下图展示了华为 Mate 和 中兴 Grand Memo 两款手机的综合表现雷达图，分别从易用性、功能、拍照、跑分、续航这五个维度进行考核，可以看出两款手机在这个维度方面的性能都比较平衡，同时也可逐项对比。虚构数据
玉珏图¶
玉玦图的简介 玦[jué]：半环形有缺口的佩玉，古代常用以赠人表示决绝。
玉玦图（又名，环形柱状图），是柱状图关于笛卡尔坐标系转换到极坐标系的仿射变换。其意义和用法与柱状图类似。
玉玦图有半价反馈效应。由于玉玦图中是用角度表示每个玦环数值的大小，角度是决定性因素。所以，哪怕外侧（半径大的）玦环的数值小于内侧（半径小的）玦环，外侧的每个玦环会相对的比里面的玦环更长。这会造成视觉上的误解。
而且因为我们的视觉系统更善于比较直线，所以笛卡尔坐标系更适合于比较各个分类的数值比较。所以玉玦图从实用的角度去看，其更多的是一种审美上的需求。
英文名：Radial Bar Chart
玉玦图的构成
一个完整的玉玦图包含以下构成元素：
玦环：角度表示数值 文本：数值、分类名 玉玦图的应用场景 适合的场景 例子1: 下图反应了美国民众对不同领域中的中美问题关注程度。
问题 关注人数比例 台海关系 0.21 中国持续增长的军事力量 0.47 中国对全球环境的影响 0.49 …… …… 中国持有美国巨额国债 0.67 例子2: 下图反应了各国人民认为气候变化是严重问题的比例。
国家 关注人数比例 巴西 0.86 印度 0.76 智利 0.76 …… …… 中国 0.18 玉玦图的误用场景 简介中提到玉玦图具有半径反馈效应。视觉上半径越大的玦环会看起来更大，半径小的则小。造成玉玦图的误用（见左图）。所以，我们认为玉玦图使用时必须进行排序（见右图）。
错误 正确 变形 柱状图
回归曲线图¶
回归曲线图的简介 回归曲线图同统计学紧密结合，属于探索型图表，通过对样本数据进行曲线回归（非线性回归）确定两个变数间数量变化的某种特定的规则或规律。我们称图中的线为回归曲线，是最准确地贯穿图中的各个点的线，分为线性回归和非线性回归。
回归曲线图用于回归分析，其主要内容是通过试验或观测数据，寻找相关变量之间的统计规律性，再利用自变量的值有效预测因变量的可能取值。
回归曲线图的构成
图表类型 回归曲线图 适合的数据 两个连续字段 功能 观察数据的变化趋势 根据样本点预测数据 数据与图形的映射 两个连续字段的分布特征元数据映射到回归线 适合的数据条数 暂无限制 回归曲线图的应用场景 例子 1：线性回归（linear regresiion）。 线性回归是最原始的回归，用来做数值类型的回归，可以利用它来构建模型并通过构件的模型来进行预测。借助可视化技术，我们可以快速判断一组数据是否属于线性回归。
比如某农业科研机构要研究最大积雪深度 x 与灌溉面积 y 之间的关系，提供的数据样本为近 10 年的数据，如下表：
年序 最大积雪深度 x(尺) 灌溉面积 y (亩) 1 15.2 28.6 2 10.4 19.3 3 21.2 40.5 4 18.6 35.6 5 26.4 48.9 6 23.4 45.0 7 13.5 29.2 8 16.7 34.1 9 24.0 46.7 10 19.1 37.4 借助 DataSet 的回归统计Transform（regression），绘制如下图表：
具体的回归分析过程不在这里详述，具体可阅读： 数理统计知识整理——回归分析与方差分析
例子 2：非线性回归。 一些常用的非线性回归曲线。
南丁格尔玫瑰图¶
南丁格尔玫瑰图的简介 南丁格尔玫瑰图又名鸡冠花图、极坐标区域图，是南丁格尔在克里米亚战争期间提交的一份关于士兵死伤的报告时发明的一种图表。
南丁格尔玫瑰图是在极坐标下绘制的柱状图，使用圆弧的半径长短表示数据的大小（数量的多少）。
由于半径和面积的关系是平方的关系，南丁格尔玫瑰图会将数据的比例大小夸大，尤其适合对比大小相近的数值。
由于圆形有周期的特性，所以玫瑰图也适用于表示一个周期内的时间概念，比如星期、月份。
英文名： Nightingale Rose Chart, Coxcomb Chart, Polar Area Diagram
南丁格尔玫瑰图的构成
图表类型 南丁格尔玫瑰图 适合的数据 列表：一个分类数据字段、一个连续数据字段 功能 对比分类数据的数值大小 数据与图形的映射 分类数据字段映射到分类轴的位置 连续数据字段映射到半径轴的高度 分类数据也可以设置颜色增强分类的区分度 适合的数据条数 不超过 30 条数据 南丁格尔玫瑰图的应用场景 适合的场景 例子1：对比不同分类的大小
下图是各国制造指数的对比，以美国为基准（100），中国的制造成本指数是 96 ，也就是说，同样一件产品，在美国制造成本是 1 美元，那么在中国则需要 0.96 美元，从下图可以看出中国的制造优势已经不明显。
country（国家) cost（制造指数） 中国 96 德国 121 美国 100 日本 111 韩国 102 .... .... 美国 美国100 不适合的场景 例子1：分类过少的场景
下图展示一个班级男女同学的个数，这种场景建议使用饼图。
女 女30 例子2：部分分类数值过小的场景
下面使用南丁格尔玫瑰图展示各个省份的人口数据，这种场景下使用玫瑰图不合适，原因是在玫瑰图中数值过小的分类会非常难以观察。推荐使用条形图。
南丁格尔玫瑰图的扩展 例子1: 扇形玫瑰图
通过设置极坐标的起始角度可以实现扇形南丁格尔玫瑰图，如下图：
例子2：层叠的玫瑰图
南丁格尔玫瑰图的实现原理是将柱状图在极坐标下绘制，如果将柱状图扩展为层叠柱状图，同样可以实现层叠的玫瑰图
下图是近十年来难民数据，其中大致可分为跨越国境的难民（refugees），未跨越国境的境内流离失所者（internally displaced persons）和尚未取得难民身份的寻求庇护者（asylum-seekers）。
year（年份） internally（境内流离失所者) refugees（跨越国境的难民） seekers(未取得难民身份) 2000 21.0 16 0.8 2001 25.0 16 .08 ... ... ... ... 南丁格尔玫瑰图与其他图表的对比 南丁格尔玫瑰图与柱状图 南丁格尔玫瑰图本质上是柱状图在极坐标上的展示。 柱状图使用矩形的高度表示数值的大小 南丁格尔玫瑰图使用扇形的半径大小表示数值的大小。 南丁格尔玫瑰图与饼图 南丁格尔玫瑰图使用扇形的半径表示数值的大小，饼图使用扇形的弧度表示数据的大小。 南丁格尔玫瑰图可以同时表现的分类多于饼图。 变形 饼图
桑基图¶
桑基图的简介 桑基图 (Sankey Diagram)，是一种特定类型的流图，用于描述一组值到另一组值的流向。上图为1869年，查尔斯米纳德（Charles Minard）绘制的1812年拿破仑征俄图（Map of Napolean's Russian Campaign of 1812），这是一个在地图上覆盖桑基图的流程图。1898年爱尔兰人Matthew Henry Phineas Riall Sankey 在土木工程师学会会报纪要的一篇关于蒸汽机能源效率的文章中首次推出了第一个能量流动图，此后便以其名字命名为 Sankey 图，中文音译为桑基图。
图中延伸的分支的宽度对应数据流量的大小。桑基图的特点如下：
起始流量和结束流量相同，所有主支宽度的总和与所有分出去的分支宽度总和相等，保持能量的平衡； 在内部，不同的线条代表了不同的流量分流情况，它的宽度成比例地显示此分支占有的流量； 节点不同的宽度代表了特定状态下的流量大小。 桑基图通常应用于能源、材料成分、金融等数据的可视化分析。
英文名：Sankey Diagram
桑基图的构成
图表类型 桑基图 适合的数据 节点数据集（可选），边数据集 功能 观察节点关系 数据与图形的映射 权重映射到节点和边的宽度 适合的数据条数 10 条以上 桑基图的应用场景 适合的场景 数据的流向 桑基图即桑基能量分流图，也叫桑基能量平衡图。
例子1:下图为 2009 年美国能源产出的分布以及能源的用途和损耗图。从图中可以明显看出主要的能源浪费发生于发电和交通。
例子2:下图显示了 2050 年英国能源生产和消费的可能情景：左边节点表示能源供应方，右边节点表示能源需求方，中间节点是相关 的生产形式，并显示能量在消耗（或丢失！）之前如何转换和传输数据来源：d3
不适合的场景 边的起始流量和结束流量不同：桑基图需要保持能量守恒，不能在中间过程创造出流量，流失（损耗）的流量应流向表示损耗的节点，所以每条边的宽度是保持不变的，需要改变边的宽度的数据推荐使用和弦图 桑基图图与其他图表的对比 桑基图和和弦图 桑基图可以描述多级关系，按照层级给节点分类；和弦图不分层级，表示节点间的相互关联 桑基图的边的权重保持不变；和弦图的边可以使用不同的初始权重和结束权重，宽度会有所变化 桑基图的扩展阅读 Go with the flow: Sankey diagrams illustrate energy economy
散点图¶
散点图的简介 散点图也叫 X-Y 图，它将所有的数据以点的形式展现在直角坐标系上，以显示变量之间的相互影响程度，点的位置由变量的数值决定。
通过观察散点图上数据点的分布情况，我们可以推断出变量间的相关性。如果变量之间不存在相互关系，那么在散点图上就会表现为随机分布的离散的点，如果存在某种相关性，那么大部分的数据点就会相对密集并以某种趋势呈现。数据的相关关系主要分为：正相关（两个变量值同时增长）、负相关（一个变量值增加另一个变量值下降）、不相关、线性相关、指数相关等，表现在散点图上的大致分布如下图所示。那些离点集群较远的点我们称为离群点或者异常点。
散点图经常与回归线（就是最准确地贯穿所有点的线）结合使用，归纳分析现有数据以进行预测分析。
对于那些变量之间存在密切关系，但是这些关系又不像数学公式和物理公式那样能够精确表达的，散点图是一种很好的图形工具。但是在分析过程中需要注意，这两个变量之间的相关性并不等同于确定的因果关系，也可能需要考虑其他的影响因素。
英文名：Scatter graph, Point graph, X-Y plot, Scatter chart or Scattergram
散点图的构成
图表类型 散点图 适合的数据 两个连续数据字段 功能 观察数据的分布情况 数据与图形的映射 两个连续字段分别映射到横轴和纵轴。 适合的数据条数 暂无限制 备注 可更具实际情况对点的形状进行分类字段的映射。点的颜色进行分类或连续字段的映射。 散点图的应用场景 散点图通常用于显示和比较数值，不光可以显示趋势，还能显示数据集群的形状，以及在数据云团中各数据点的关系。
例子：这里通过男女身高和体重的例子来展示上述所描述的散点图的功能。数据来源丢失，数据不可靠！
性别 身高（cm） 体重（kg） 女 167.5 59 女 161.2 51.6 男 176 86.4 ... ... ... 男 180.3 82.8 (1) 首先对身高和体重两个维度进行比较，可以看到所有的数据点比较集中，呈正相关关系，即身高越高，相应的体重会越大。
(2) 通过添加平均身高和平均体重的辅助线，将散点图的平面坐标分为四个象限，可以更好得看出数据的分布情况。
(3) 新增一个维度：我们根据性别为每个点加上不同颜色，以展示男女不同性别身高和体重数据的分布。
(4) 同时我们也可以根据样本数据特征计算出回归方程，并为散点图添加回归线。
散点图的扩展 我们可以改变数据点形状来表示数据值的区别。
散点图的扩展 散点图矩阵（scatter plot matrix）是散点图的高维扩展，它从一定程度上克服了在平面上展示高维数据的困难，在展示多维数据的两两关系时有着不可替代的作用。以统计学中经典的鸢尾花案例为例，其数据集包含了50个样本，都属于鸢尾属下的三个亚属，分别是山鸢尾、变色鸢尾和维吉尼亚鸢尾。四个特征被用作样本的定量分析，它们分别是花萼和花瓣的长度和宽度。基于这四个特征的集合，费雪建立了一种线性判别分析法以确定其属种。
SepalLength（花萼长度） SepalWidth（花萼宽度） PetalLength（花瓣长度） PetalWidth（花瓣宽度） Species（属种） 5.1 3.5 1.4 0.2 setosa 4.9 3.0 1.4 0.2 setosa ... ... ... ... ... 7.0 3.2 4.7 1.4 versicolor 6.4 3.2 4.5 1.5 versicolor ... ... ... ... ... 6.3 3.3 6.0 2.5 virginica 5.8 2.7 5.1 1.9 virginica ... ... ... ... ... 散点图与其他图表的对比 散点图和折线图 这里我们从适用场景和可视化表现两个角度进行对比。
适用场景 折线图可以显示随单位（如：单位时间）而变化的连续数据，因此非常适用于显示在相等时间间隔下数据的趋势。 散点图显示若干数据系列中各数值之间的关系，或者将两组数绘制为 xy 坐标的一个系列。 可视化表现 在折线图中，类别数据沿水平轴均匀分布，所有值数据沿垂直轴均匀分布，即折线图只有一个数据轴（即垂直轴）。 散点图有两个数值轴，沿水平轴（x 轴）方向显示一组数值数据，沿垂直轴（y 轴）方向显示另一组数值数据。散点图将这些数值合并到单一数据点并以不均匀间隔或簇显示它们。散点图通常用于显示和比较数值，例如科学数据、统计数据和工程数据。 散点图和气泡图 散点图和气泡图都是将两个字段映射到x,y轴的位置上。散点图侧重于展示点之间的分布规律，而气泡图将数值映射到气泡的大小上，增加了一个维度的数据展示。 散点图可以展示成千上万个点的数据，而气泡图为了防止气泡的互相遮挡，需要根据画布的大小控制数据的规模。 散点图的扩展阅读 Wikipedia: Scatter plot What is a scatterplot 不要小看散点图 http://www.datavis.ca/papers/friendly-scat.pdf 变形 气泡图
螺旋图¶
螺旋图的简介 螺旋图，基于阿基米德螺旋坐标系，常用于绘制随时间变化的数据，从螺旋的中心开始向外绘制。
螺旋图有两大好处：
绘制大量数据：螺旋图节省空间，可用于显示大时间段数据的变化趋势； 绘制周期性数据：螺旋图每一圈的刻度差相同，当每一圈的刻度差是数据周期的倍数时，能够直观的表达数据的周期性。 英文名：Spiral Chart
螺旋图的构成
图表类型 螺旋图 适合的数据 一个时间数据字段，一个连续字段 功能 观察数据周期和变化趋势 数据与图形的映射 时间数据字段映射到旋转角度θ轴，连续字段映射到线圈间距radius轴 适合的数据条数 100条以上 螺旋图的应用场景 适合的场景 例子1：展示大量数据的变化趋势
例如在股票市场上，将股票的逐日收市价使用螺旋图来表示，用来展示股市大致上的趋势。下图展示了“湖南天雁”股票 2015 年 1 月 1 日至 2015 年 11 月 20 日的螺旋图。为了让变化趋势更加明显，可以采用不同的颜色来加深辨识度。
例子2：展示数据的周期。 例如将网站的访问量使用螺旋图来表示，用来展示大量访问该网站的周期。下图展示了G2官网（ https://g2.alipay. ）2016 年 5 月 13 日至 2016 年 10 月 28 日的日浏览次数。G2从5月18发布至今，持续运行了24周，图中以28天为一圈，共画了6圈，每圈含四周数据。从图中可以看出，一圈内有明显的四个周期，经分析发现，访问G2网址的流量主要来自工作日的5天，可见，G2浏览次数的周期为一周。另外，在5月18号之后的两周内流量较多，即G2发布时的推广效果。
螺旋图的扩展 螺旋色块图 通过自定义shape把柱状图的每个数据填满当前区域并调整柱状图的宽度，可以绘制出螺旋色块图
堆叠面积图¶
堆叠面积图的简介 堆叠面积图和基本面积图一样，唯一的区别就是图上每一个数据集的起点不同，起点是基于前一个数据集的，用于显示每个数值所占大小随时间或类别变化的趋势线，展示的是部分与整体的关系。
堆叠面积图上的最大的面积代表了所有的数据量的总和，是一个整体。各个叠起来的面积表示各个数据量的大小，这些堆叠起来的面积图在表现大数据的总量分量的变化情况时格外有用，所以堆叠面积图不适用于表示带有负值的数据集。非常适用于对比多变量随时间变化的情况。
在堆叠面积图的基础之上，将各个面积的因变量的数据使用加和后的总量进行归一化就形成了百分比堆叠面积图。该图并不能反映总量的变化，但是可以清晰的反应每个数值所占百分比随时间或类别变化的趋势线，对于分析自变量是大数据、时变数据、有序数据时各个指标分量占比极为有用。
英文名：Stacked Area Chart
堆叠面积图的构成
图表类型 堆叠面积图 适合的数据 一个分类字段数据，两个连续字段数据 功能 对比每个分组数据的变化趋势 数据与图形的映射 两个连续字段分别映射到横轴和纵轴 另一个分类数据映射到图形的颜色 适合的数据条数 映射到颜色的分类不超过12个;每种分类的数据不少于两条 堆叠面积图的应用场景 适合场景 例子1：百分比堆叠面积图
下图显示的是近几个月安卓手机各个版本在市场的占比情况。
date（日期） value （占比） name (版本号) 2015-04 4.975 4.1.1 2015-04 8.4317 4.1.2 2015-04 4.6018 4.2.1 2015-04 18.2945 4.2.2 。。。 。。。 。。。 示例2：游戏公司在2001，2002，2003，2004 几年内不同分类的游戏的销售情况：
year（年份） genre（游戏类型） sold（销售量） 2001 Strategy 11,500 2001 Action 6,000 2001 Shooter 3,500 2001 Other 1,500 2002 Strategy 10,500 2002 Action 8,000 2002 Shooter 4,500 2002 Other 1,800 ... ... ... 不适合的场景 例子1：分类数据的比较不要使用面积图
前面的示例中的游戏销售情况，比较的是4年的游戏销售情况，如果用于比较各个游戏类型的销售情况时，使用面积图不太合适，此时应该使用堆叠柱状图。
错误 正确 与其他图表的对比 与面积图的对比 堆叠面积图是一种特殊的面积图，都是表现数据在连续一段时间、一个数据区间内的趋势 堆叠面积图侧重于表现不同时间段（数据区间）的多个分类累加值之间的趋势 百分比堆叠面积图表现不同时间段（数据区间）的多个分类占比的变化趋势 与堆叠柱状图的对比 堆叠柱状图和堆叠面积图都可以呈现不同分类的累加值 堆叠柱状图和堆叠面积图的差别在于，堆叠面积图的x轴上只能表示连续数据（时间或者数值），堆叠柱状图的x轴上只能表示分类数据 变形 折线图 面积图
堆叠柱状图¶
堆叠柱状图的简介 与并排显示分类的分组柱状图不同，堆叠柱状图将每个柱子进行分割以显示相同类型下各个数据的大小情况。它可以形象得展示一个大分类包含的每个小分类的数据，以及各个小分类的占比，显示的是单个项目与整体之间的关系。我们将堆叠柱状图分为两种类型：
一般的堆叠柱状图：每一根柱子上的值分别代表不同的数据大小，各层的数据总和代表整根柱子的高度。非常适用于比较每个分组的数据总量。
百分比的堆叠柱状图：柱子的各个层代表的是该类别数据占该分组总体数据的百分比。
堆叠柱状图的一个缺点是当柱子上的堆叠太多时会导致数据很难区分对比，同时很难对比不同分类下相同维度的数据，因为它们不是按照同一基准线对齐的。
英文名：Stacked Bar Chart
堆叠柱状图的构成 一般堆叠柱状图
图表类型 堆叠柱状图 适合的数据 列表：两个分类数据字段、一个连续数据字段 功能 对比分类数据的数值大小，同时对比一个分类（分组）下数据的汇总值 数据与图形的映射 其中一个分类数据字段映射到坐标轴的位置用于分组， 另一个分类数据映射到图形的颜色 连续数据字段映射到矩形的长度 适合的数据条数 映射到位置的分类不超过 12 个，映射到颜色的分类不超过 6 个 百分比柱状图
图表类型 百分比柱状图 适合的数据 列表：两个分类数据字段、一个连续数据字段 功能 对比同一个分组数据内不同分类的占比 数据与图形的映射 其中一个分类数据字段映射到坐标轴的位置用于分组， 另一个分类数据映射到图形的颜色 连续数据字段映射到矩形的长度 适合的数据条数 映射到位置的分类不超过 12 个 映射到颜色的分类不超过 6 个 堆叠柱状图的应用场景 一般堆叠柱状图适合的场景 例子1：对比不同分组的总量大小，同时对比同一分组内不同分类的大小。如下图显示的是每种化妆品在各个城市的销售情况，通过堆叠柱状图，我们可以很清晰对比同一种化妆品到底在哪个城市销售更好。
name（化妆品名称） city revenue(销售收入) Nailpolish Florida 12814 Eyebrowpencil Florida 13012 Rouge Texas 9054 。。。 。。。 。。。 说明：
name （化妆品名称）使用 位置区分不同的化妆品 city (不同的城市) 使用不同的颜色区分 revenue （销售收入）使用矩形的长度表示销售量的大小，将销售收入堆叠起来，可以看到某个化妆品在所有城市的总销售额 一般堆叠柱状图不适合的场景 一般堆叠柱状图各个分组内不同分类的基准线不同，所以不适合对比不同化妆品在不同城市的销售量
百分比堆叠柱状图适合的场景 例子1：观察分类占比情况
下图表是一个游戏公司在不同年份的各类游戏的销量情况：
year（年份） genre（游戏类型） sold（销售量） 2001 Sports 27,500 2001 Strategy 11,500 2001 Action 6,000 2001 Shooter 3,500 2001 Other 1,500 2002 Sports 29,500 2002 Strategy 10,500 2002 Action 8,000 2002 Shooter 4,500 2002 Other 1,800 ... ... ... 说明：
genre 使用横轴位置区分不同的游戏类型 year 使用颜色区分不同年份的游戏 sold 使用矩形的长度表示游戏销量 百分比堆叠柱状图不适合的场景 对比不同分组内同个分类的数据大小 对比各分组总数的大小 堆叠柱状图的的扩展 纵向柱状图建议展示的数据条数较少，当分类过多时，我们可以使用横向的堆叠柱状图。横向柱状图的介绍详见柱状图
例1: 下图展示了美国几十个州不同年龄段的人口数据分布情况。
州名称 年龄段 人口数量 "CA" "小于5岁" 2704659 ... ... ... 说明：
州名称，用纵轴方向的位置区分各个州 年龄段，用不同的颜色区分不同年龄段的人口 人口数量，用每个矩形的长度来表示人口数量的大小，每个州不同年龄段的人口堆叠起来，可以看到整个州总的人口 堆叠柱状图和其他图表的对比 堆叠柱状图和一般柱状图 堆叠柱状图可以增加一个维度，用于对比一组数据内不同分类的数据值大小，可以表示 3 个数据字段（维度）的数据 一般柱状图只能表示 2 个数据字段（维度） 堆叠柱状图和堆叠区域图 堆叠柱状图主和堆叠区域图都能表示3个维度的数据， 堆叠柱状图用于表示2个分类数据字段， 1 个连续数据字段，主要展示分类之间的对比 堆叠区域图用于表示1个分类字段， 2 个连续字段，主要展示在一个连续（有序）区间内不同分类大小（比例）的变化趋势。 堆叠柱状图和分组柱状图 堆叠柱状图和分组柱状图都可以对比同一个分组内部不同分类的数据大小， 分组柱状图，可以对比不同分组内相同分类的数据大小，但无法对比不同分组的总体数据大小 堆叠柱状图，可以对比不同分组的总体数据大小，但不适合对比不同分组内相同分类的数据大小，因为不同分组内的相同分类处于不同的基准线上 变形 柱状图 分组柱状图
矩形树图¶
矩形树图的简介 矩形树图由马里兰大学教授Ben Shneiderman于上个世纪90年代提出，起初是为了找到一种有效了解磁盘空间使用情况的方法。 矩形树图适合展现具有层级关系的数据，能够直观体现同级之间的比较。一个Tree状结构转化为平面空间矩形的状态，就像一张地图，指引我们发现探索数据背后的故事。
矩形树图采用矩形表示层次结构里的节点，父子节点之间的层次关系用矩形之间的相互嵌套隐喻来表达。从根节点开始，屏幕空间根据相应的子节点数目被分为多个矩形，矩形的面积大小通常对应节点的属性。每个矩形又按照相应节点的子节点递归的进行分割，知道叶子节点为止。
矩形树图的好处在于，相比起传统的树形结构图，矩形树图能更有效得利用空间，并且拥有展示占比的功能。矩形树图的缺点在于，当分类占比太小的时候文本会变得很难排布。相比起分叉树图，矩形树图的树形数据结构表达的不够直观、明确。
矩形树图的布局算法非常多，而且经常为可视化工程师津津乐道。但介绍具体实现并不是AntV目前的职责，有兴趣的同学可以参见拓展阅读部分。
英文名：Treemap, Rectangular Tree
矩形树图的构成
图表类型 矩形树图 适合的数据 带权的树形数据 功能 表示树形数据的树形关系，及各个分类的占比关系 数据与图形的映射 树形关系映射到位置，占比数值数据映射到大小。设置颜色增强分类的区分度 适合的数据条数 大于5个分类 矩形树图的应用场景 适合的场景 适合展示带权的树形数据。
例子1：下图是2015年手机品牌及其下属手机型号的销量信息。
说明：
同一级别的树通过算法，按各自权重大小（手机销量占比）将坐标系分割成若干个矩形块，设置颜色增强分类的区分度。 交互，点击矩形块可下钻到子分支。 不适合的场景 没有权重关系，且需要明显展示层级关系，用分叉树图更合适
例子2：某公司组织部门图。第一个图是用矩形树图绘制，没有权重，层次不清。第二个图用分叉树图绘制，部门组织层级清晰明了。
矩形树图与其他图表的对比 矩形树图和马赛克图 矩形树图用于展示树形数据，是关系型数据。马赛克图用于分析列表数据，是非关系型数据。 矩形树图和分叉树图（分叉树图介绍敬请期待） 矩形树图用于展示带权的数据，分叉树图用于展示不带权的数据 两个图表都用于展示层次数据，但是分叉树图展示的层次关系更清晰 矩形树图能更多的展现树形结构内部的占比关系，分叉树图没有这个能力 矩形树图的扩展阅读 矩形树布局 treemapart treemap
韦恩图¶
韦恩图简介 维恩图(Venn)，也叫温氏图、维恩图、范氏图，用于显示元素集合重叠区域的图表。
维恩图是关系型图表，通过图形与图形之间的层叠关系，来表示集合与集合之间的相交关系。
韦恩图的构成
一个完整的韦恩图包含以下构成元素：
若干个圆表示集合。 若干个圆层叠部分表示公有集合。 内部文本标签。 韦恩图的应用场景 适合韦恩图的场景 适合场景1：表示2个集合相交关系 场景说明：有一个集合A，有一个集合B，相交集合为C。 数据说明：2个维度数据，分类数据映射集合名，关系数据映射集合关系。
适合场景2：表示3个集合相交关系 场景说明：有集合A、B、C。 数据说明：2个维度数据，分类数据映射集合名，关系数据映射集合关系。
适合场景2：表示4个集合相交关系 场景说明：有一个集合A、B、C、D。 数据说明：2个维度数据，分类数据映射集合名，关系数据映射集合关系。
不适合韦恩图的场景 超过五个集合的场景，不适合适用韦恩图。 韦恩图与其他图表的对比 韦恩图与树状图 韦恩图是利用图形与图形间的层叠关系描述集合关系，侧重于表示相交关系。 树状图是利用图形与图形间的分叉关系描述集合关系，侧重于表示从属关系。 韦恩图的扩展阅读 韦恩图 维基百科
词云¶
词云的简介 词云，又称文字云，是文本数据的视觉表示，由词汇组成类似云的彩色图形，用于展示大量文本数据。通常用于描述网站上的关键字元数据（标签），或可视化自由格式文本。 每个词的重要性以字体大小或颜色显示。 词云的作用：
快速感知最突出的文字 快速定位按字母顺序排列的文字中相对突出的部分 词云的本质是点图，是在相应坐标点绘制具有特定样式的文字的结果
英文名：Word Cloud
词云的构成 图表类型 词云 适合的数据 两个代表坐标的连续数据字段（自动计算）、一个代表文字内容的分类数据字段、多个代表文字样式的分类数据字段如颜色、大小、旋转角度等（可选） 功能 对比文字的重要程度 数据与图形的映射 两个连续数据字段映射到横轴和纵轴的位置、代表文字内容的分类数据字段映射到文字图形、多个代表文字样式的分类数据字段分别映射到文字图形的样式 适合的数据条数 超过 30 条数据 词云的应用场景 适合的场景 例子1: 对比大量文本 下图是根据某段时间内使用 G2 类库的网站对 G2 类库的请求量数据绘制的词云，从图中可以一眼看出访问量最大的网站。
site pv localhost 27,50 g2.alipay.com 2339 ... ... 说明：
文本的坐标由词云布局工具自动计算 文本颜色和旋转角度由词云布局工具随机生成 site 字段通过文字处理后映射到文本形状 pv 映射到文本大小。 例子2: 使用图片做边界限制 结合图片可以绘制出特定形状的词云
不适合的场景 例子1：数据区分度不大 当数据的区分度不大时使用词云起不到突出的效果
例子2: 数据太少 数据太少时很难布局出好看的词云，推荐使用柱状图
词云与其他图表的对比 词云和柱状图 词云适合大量数据，柱状图适合少量数据 词云展示文字更为直观，柱状图需要借助坐标轴和刻度表示文字的分类和数据 词云可以映射更多分类字段在在文字样式上，柱状图只能映射一个分类字段在颜色上