图表的分类及使用方法
折线图：
主要用来展示数据相随着时间推移的趋势或变化。折线图非常适合用于展示一个连续的二维数据，如某网站访问人数或商品销量价格的波动。
- 折线图连接各点可以使用曲线和直线，曲线较为美观，直线数据展示更清晰
- 折线颜色要清晰，不与背景色和坐标轴线近似
- 尽量不超过4条线，过多的线导致界面混乱无法阅读
柱状图：
通过使用水平或垂直方向 柱子的高度来显示不同类别的数值，其中柱状图的一个轴显示正在比较的类别，而另一个轴代表对应的刻度值。
- 柱状图尽量不使用超过3中颜色
柱状图柱子间的宽度和间隙要适当。当柱子太窄时，用户的视觉可能会集中在两个柱中间的负空间，而这里是不承载任何数据的。合理的宽度和间隙应该是 单个柱子的宽度不小于柱间间隙的两倍。
Y轴数据应该从0基线开始，以恰当地反映数值。如果展示的是被截断的数据，那很可能会误导观众做出错误的判断。例如左侧图表显示出的数据结果是2017年收入是2014年收入的五倍，而实际上如右侧图表完整显示的数据表明2017年收入相对于2014年其实只提升了25%。
对多个数据系列排序时，如果不涉及到日期等特定数据，最好能符合一定的逻辑用直观的方式引导用户更好的查看数据。可以通过升序或降序排布，例如按照数量从多到少来对数据进行排序，也可以按照字母顺序等来排布。总之，按照逻辑排序可以一定程度上引导人们更好地阅读数据。
双向柱状图
双向柱状图多用于展示包含相反含义的数据的对比。其中图表的一个轴显示正在比较的类别，而另一轴代表对应的刻度值。
双向柱状图一般用于正负两份相反数据的对比。例如一周内个人收入和支出的统计，其中收入为正数，支出为负数。使用双向柱状图可以很明确的对收入和支出做出对比，并能从单个系列中分析收入和支出的数值及波动。
双向柱状图可分为垂直方向的双向柱状图（如上图）和水平方向的双向柱状图（又叫正负条形图，如下图），例如一个客户满意度的调查数据分析中，有正面评价和负面评价，这很适合用正负条形图，所有数据在中间对齐，正面的评价数据分布在右侧，负面的评价数据分布在左侧。
堆叠柱状图
堆叠柱状图是柱状图的扩展，不同的是，柱状图的数据值为并行排列，堆叠柱图则是一个个叠加起来的。它可以展示每一个分类的总量，以及该分类包含的每个小分类的大小及占比，因此非常适合处理部分与整体的关系。
与饼图显示单个部分到整体的关系不同的是，堆叠柱状图可以显示多个部分到整体的关系。例如一个班级体育课选课的各项目人数统计，你可以用柱状图或饼图来展示。但是，当需要进一步区分男生和女生参与到不同项目中的人数分别是多少时，就需要把每个项目中包含的男生数和女生数都展示出来。如图选用堆叠柱状图，不仅能显示每个项目的总人数，还能展示出每个项目中的一部分与整体的关系。
- 遵循基本的柱状图使用原则。为了使图表易于理解，请避免使用太多颜色，不要刻意展示被截断的数据误导读者。
- 堆叠柱状图不适合用于对比不同分组内同个分类之间的数据大小。
- 堆叠柱状图最好的展示效果是每个组只包含两到三个类别，最多不要超过6个，因为太多的数据系列会使数据的阅读和分辨变得非常困难。
- 由于要分析部分数据在整体中的占比，因此要避免用堆叠柱状图展示包含负数的数据。
- 大多数的堆叠柱状图都是垂直绘制的，但是如果你的数据标签特别长时，考虑更好地展示效果，可以选择使用水平堆叠的方式。
分组柱状图
分组柱状图也被称为聚集柱状图。当两个或多个数据序列并排显示并在同一轴上的类别下分组时，将使用分组柱状图。相当于包含带有两个或更多图表的简单的条形图。
分组柱状图通常是用于将包含相同变量或类别的几个分组进行比较。像柱状图一样，每个柱的长度用于显示类别的数值，每个数据系列被分配一个单独的颜色或相同色系的不同饱和度，以区分它们，每组数据之间相互间隔并进行对比。
- 如果每个分组中拥有的系列过多，数据的阅读难度就会越增加，因此不建议每个分组中包含过多的系列。在系列较多时，可考虑使用堆叠柱状图。
- 每两个分组之间的间距要大于组内不同系列之间的间距，以免造成视觉上错误的归类和区分。
饼图：
主要用于展现不同类别数值相对于总数的占比情况。图中每个分块（扇区）的弧长表示该类别的占比大小，所有分块数据总和为100%。
- 饼图适合用来展示单一维度数据的占比，要求其数值中没有零或负值，并确保各分块占比总和为100%。
- 我们很难比较一个分块过多的饼图的数据，建议尽量将饼图分块数量控制在五个以内。当数据类别较多时，我们可以把较小或不重要的数据合并成第五个模块命名为”其它”。如果各类别都必须全部展示，此时选择柱状图或堆积柱状图或许更合适。
- 饼图不适合被用于精确数据的比较，因此当各类别数据占比较接近时（如下左图），我们很难对比出每个类别占比的大小。此时建议选用柱状图或南丁格尔玫瑰图（如下右图）来获取更好的展示效果。
- 大多数人视觉习惯是按照顺时针和自上而下的顺序去观察。因此在绘制饼图时，建议从12点钟开始沿顺时针右边第一个分块绘制饼图最大的数据分块，有效的强调其重要性。
5.可以添加一些装饰来强调饼图中的某一个数据。颜色、动效、样式、位置等元素都可以被用来突出显示一个扇区。但注意适度原则，有时太多的装饰会让用户理解数据时分心。
散点图：
在直角坐标系显示数据的两个变量（X和Y轴）之间的关系，数据显示为点的集合，适合用于在不考虑时间的情况下比较大量的数据点。散点图通常用来识别两个变量之间的相关性或用来观察他们的关系，从而发现某种趋势，对于查找异常值或理解数据分布也很有效。如下图某个班级学生身高和体重的分布状况。
- 如果一个散点图没有显示变量之间的任何关系，那么或许该图表类型不是此数据的最佳选择。
- 散点图只有有足够多的数据点，并且数据之间有相关性时才能呈现很好的结果。如果一份数据只有极少的信息或者数据间没有相关性，那么绘制一个很空的散点图和不相关的散点图都是没有意义的
- 如果数据包含不同系列，可以给不同系列使用不同的颜色，例如蓝色代表男性，红色代表女性，并增加图例标注出蓝色代表的含义。可以区分了解男女不同性别身高和体重的分布状况。还可以分别添加每个系列平均值的辅助线，可以更好的理解数据的分布情况，如图中女生体重高于平均值的比低于平均值的少。
气泡图：
显示变量之间相关性的一种图表。与散点图类似。在直角坐标系中显示数据的两个变量（X和Y轴）之间的关系，数据显示为点的集合。与散点图不同的是，气泡图是一个多变量图，它增加了第三个数值即气泡大小的变量，在气泡图中，较大的气泡表示较大的值。可以通过气泡的位置分布和大小比例，来分析数据的规律。
雷达图：
又被叫做蜘蛛网图，适用于显示三个或更多的维度的变量。雷达图是以在同一点开始的轴上显示的三个或更多个变量的二维图表的形式来显示多元数据的方法，其中轴的相对位置和角度通常是无意义的。
- 一个雷达图包含的多边形数量是有限的，如果有五个以上要评估的事物，无论是轮廓还是填充区域，都会产生覆盖和混乱，使得数据难以阅读。
- 变量太多会产生太多的轴，也会使图表变得混乱，因此，要保持雷达图的简单并限制其变量数量。
- 由于径向距离很难判断，所以虽然有网格线的参考，但是还是很难直观的比较图表内变量具体的值，如果需要的比较具体值话，建议使用线图。
漏斗图：
又叫倒三角图，漏斗图将数据呈现为几个阶段，每个阶段的数据都是整体的一部分，从一个阶段到另一个阶段数据自上而下逐渐下降，所有阶段的占比总计100％。与饼图一样，漏斗图呈现的也不是具体的数据，而是该数据相对于总数的占比、漏斗图不需要使用任何数据轴。
- 以电商网站数据为代表，漏斗图能直观地展现从最初展现网站到最终下订单购买这整个流程中的转化状况。它不仅能展示用户从看到网站到实现购买的最终转化率，还可以展示每个步骤的转化率，能够直观地展示和说明问题所在，进而能针对性地通过各阶段的转化分析去改善设计。
- 漏斗图不是表示各个分类的占比情况，而是展示数据变化的一个逻辑流程，如果数据是无逻辑顺序的占比比较，建议使用饼图更合适。
- 可以根据数据选择使用对比色或同一种颜色的色调渐变，从最暗到最浅来依照漏斗的尺寸排列。切记，不要添加许多图层和颜色造成漏斗图难以阅读。
仪表盘：
也被称为拨号图表或速度表图。其显示类似于拨号/速度计上的读数的数据，是一种拟物化的展示形式。仪表盘的颜色可以用来划分指示值的类别，使用刻度标示数据，指针指示维度，指针角度表示数值。
- 仪表盘非常适合在量化的情况下显示单一的价值和衡量标准，不适合用于比较不同变量或者趋势的分析。
- 仪表盘上可以同时展示不同纬度的数据，但是为了避免指针的重叠影响数据的查看，并且基于常识，仪表盘的指针数量建议最多不要超过3根。如果确实有多个数据需要展示，建议可使用多个仪表盘。
配色指南
可视化色彩理论基础
色相、亮度、饱和度
从可视化编码的角度对颜色进行分析，可以将颜色分为色相、亮度和饱和度三个视觉通道。
色相 即色彩的相貌和特征。自然界中色彩的种类很多，色相指色彩的种类和名称。如；红、橙、黄、绿、青、蓝、紫等等颜色的种类变化就叫色相。
明度 指色彩的亮度。颜色有深浅、明暗的变化。比如，深黄、中黄、淡黄、柠檬黄等黄色在明度上就不一样，紫红、深红、玫瑰红、大红、朱红、桔红等红颜色在亮度上也不尽相同。这些颜色在明暗、深浅上的不同变化，也就是色彩的又一重要特征一一明度变化。
色彩的明度变化有许多种情况：
一、不同色相之间的明度变化。如：白比黄亮、黄比橙亮、橙比红亮、红比紫亮、紫比黑亮；
二、在某种颜色中加白色，亮度就会逐渐提高，加黑色亮度就会变暗，但同时它们的纯度(颜色的饱和度)就会降低
饱和度 色彩的鲜艳程度，饱和度越高,表现越鲜明,饱和度较低,表现则较黯淡。
映射方式
针对不同类型的数据，我们通常也会选用不同的颜色映射方式。根据上面的简介我们可以知道：
色相： 没有明显的顺序性、一般不用来表达数据量的高低，而是用来表达数据列的类别。
明度和饱和度： 在视觉上很容易区分出优先级的高低、被用作表达顺序或者表达数据量视觉通道。
下面给出两例映射方式：
嵌套饼图中通过不同色相来表达不同类别的数据列 ：
下图通过明度的不同来表达微博签到数据高低，从图中可以很清晰得知、数据列明度越高、数据量越高：
图表配色
配色指南
标准色: 通过整体颜色规范提取和增加，提炼出 6 个标准色，颜色使用较少时，首选标准色；
分别为：#60acfc 100% 、#32d3eb 100% 、#5bc49f 100% 、#feb64d 100% 、#ff7c7c 100%、#9287e7 100%
基准色: 通过标准色扩展出 24个基准色，相互链接组成基准色环，如果图表用色数量较多，标准色无法满足颜色要求，可以从基准色中进行拓展与标准色近似的色值。
扩展色: 基础色相可以通过叠加 20% 白或者 10% 黑来扩展出不同明度的颜色，应用于颜色更加丰富的使用场景。
配色方案
颜色对比型：推荐图表颜色之间对比较为明显的场景下使用；
冷色：推荐图表偏冷色系的情况使用；
暖色：推荐图表偏暖色系的情况使用。
配色示例
多色使用
柱状图示例：
线性图示例：
透明度使用
在线性面积图表中，也要重视透明度这个因素。通常使用透明度时，图表会有很多堆叠层次，我们需要做到使每一个前景层都能够在背景层之上良好地显示，并且不产生相互干扰。此时建议数据之间选择不同色相，面积区域使用 10% 不透明的标准色，建议数据叠加数量不超过4个，超过 4 个不建议使用线下面积图表；
渐变色使用
有些情况下图表可以使用渐变色填充图表来表现特定场景，此时注意颜色选取为同一色系，渐变层级不宜过大，整体颜色需要与平台保持协调一致。
背景色使用
图表背景颜色必须要很好的衬托图表主体，又不产生喧宾夺主的效果。目前常见的背景色有深色系和浅色系两种。
深色系
优点：更好的凸显主体，建立良好的视觉层次，反应图表内容，视觉吸引力强；
缺点：可读性低、对配色水平要求较高；
浅色系
优点：适用性广，可读性高；
缺点：图表内容不易聚焦；
背景色建议：#ffffff #f7f7f7 #333333
