图形分类
随时间变化图形
对一段时间内数据的展示
1. 折线图
常用于表示一个连续时间段内数据的变化趋势，主要功能是能够清晰地反映出数据随时间变化的趋势
2. 柱状图
用于随时间变化而产生变量的数据统计
3. 堆积柱状图
可以展示两个或多个数据的变化，以及数据之间的综合比较情况
4. 面积图
和折线图相同，与折线图唯一不同的是，其自变量数据和坐标轴之间有颜色填充，这样能更加突出数据的趋势变化
5. 蜡烛图（K线图）
K线是围绕开盘价、最高价、最低价、收盘价等来反映市场趋势和价格信息的
6. 瀑布图
可以呈现随时间变化的数据，展示某时间段内起点到终点的数据变
不同于堆积柱状图，瀑布图能够重点突出数据变化的结果，以表示多个特定数据之间的变化关系
类别比较图形
主要用于两个或两个以上类别数据的比较
1. 柱状图
不仅可以用于表示时间维度的数据变化，还可以用于类别的对比
2. 分组柱状图
可以在同一数轴上展示各个分类下的不同分组数据
3. 气泡图
可以轻松驾驭二维到多维的数据展示
4. 平行坐标图
常用于克服笛卡儿坐标系，但不能多维展示数据的分布及关系。它可以用多个垂直平行坐标轴来展示不同维度的数据
5. 多条折线图
不仅可以表示数据随时间变化的趋势，还可以展示多组数据的对比情况
6. 子弹图
子弹图的数据展示类似于仪表盘，它的优势是可以表达丰富的数据信息，并且在UI设计中占用的空间相对较小
排名图形
可以展示每个分类数据的排名顺序，还可以直观地展示最大数和最小数等
1. 有序条形图
主要用于展示各个分类的数据排名
2. 有序柱状图
与有序条形图一样，有序柱状图也能呈现数据的排名情况
3. 平行坐标图
不仅可以用于不同类别数据的对比，也可以用于展示数据的结果排序
如果数据既需要展示各个维度类别的对比，又需要体现最终排名情况，那么平行坐标图非常适合
占比图形
主要用于展示分类数据占整体的比例情况
1. 饼图
展示占比数据
* 在数据可视化产品中，因为饼图是大面积的色块，视觉上会非常突显，很容易抢走重要数据的风头，所以使用时要酌情考虑
2. 环形图
环形图与饼图最明显的区别就是中间区域是空的。因为环形图的视觉表现不像饼图那样突出，在环形图的空心区域还可以放图标、标题、数据等，相对饼图其利用率更高
3. 堆积面积图
堆积面积图是叠加数据，没有重叠的部分，它的整体色块面积就是数据总量，其中不同的分类数据可展示不同的占比情况
4. 矩形树图
矩形树图是非常直观的占比图形，可展示多层级结构的占比情况。如果用不同颜色表示各个分类，则可以在大分类中不断下钻二级分类
需要注意的是，在不断下钻的同时要保证图形的易读性
5. 旭日图
旭日图相当于多个饼图，能够展示多层级的数据，同时还能够表示各分类的关系及占比情况
关联图形
展示两个或两个以上的数据变量之间的关系
1. 散点图
将所有数据以点的形式展示在坐标系上，点的位置由X轴和Y轴的变量数值决定。点越聚集说明数据的关联性越强，反之关联性越弱
3. 柱状图+折线图
柱状图+折线图可以表示关联关系
4. 热力图
可以在坐标轴上呈现数据的大小分布，也可以在地图或图片上使用
分布图形
主要用于展示每个数值在数据集中出现的频次或数量
1. 直方图
直方图与柱状图非常相似，但在数据表示上，直方图主要展示数据的分布情况，而柱状图是比较数据的大小
2. 箱形图
箱形图因形状类似于箱子而得名，其能够很好地展示一组数据的分布情况，以及分析一组数据的最大值、最小值、平均值、四分位数
3. 小提琴图
小提琴图结合了箱形图的特征，同样是展示数据的分布情况
关系图形
表示多个状态之间的关系及数据移动的变化
1. 桑基图
也被称为桑基能量平衡图，因为桑基图始末端的分支宽度总和相等，可以表示数据间的关系和一种特定类型的流程图
各个国家是图形的节点，流动的线条代表流量，线条越宽表示流量数据越大。桑基图常用于能源流向、收入支出、人员流动等数据的可视化展示
3. 韦恩图
通过图形与图形的叠加，表示集合与集合之间的相交关系
图形选用
3D图形的科学运用
当页面中的某个区域视觉效果薄弱时，也可以采用3D图形的形式来丰富页面，使之保持页面的视觉平衡
图形设计
图形视觉层级
第一层级：数据可视化的元素，也就是柱状体，这是柱状图呈现数据的核心元素
第二层级：标题，重要但不是核心，明了即可
第三层级：分类标签和副标题。分类标签用来强调可视化元素是什么，副标题是对图形的备注和解释
第四层级：起始线。起始线是0的刻度线，强调开始的位置
第五层级：刻度值。弱化刻度上的数值能够突出图形中的数据
第六层级：网格线也叫标识线，用来标识可视化元素对应的刻度值
第七层级：图形背景，因为任何元素都呈现在背景上，所以背景层级最低
折线图的设计原则
刻度值从0开始，随着数据的增减，刻度值也做相应的变化
折线的粗细要适中
在产品的图形设计中，一般网格线和起始线都是一像素，折线一般用两像素，这样的粗细会有较好的视觉表现
柱状图的黄金法则
柱状体不能太粗也不能太细，间距要有规律，这样在视觉上才能有好的表现
定义柱状体的间距可以用5分原则设计法，即柱子之间的间距为N，左右两边与柱子之间的距离就是N/2
在保证界面元素整体协调性的情况下，尽可能把柱子的宽度设计成N，这样视觉上最为协调，如果不能则一定要保证间距遵循5分原则
把X轴的数值做成动态变换方式，即随着数据的增减，刻度值也随之改变
饼图的规范设计法则
饼图分类过多时，一般不把文字放在图形元素上，因为一旦出现几个相对较小的占比数据，字就很容易溢出，不容易辨别指向的分类
饼图的分类最好从12点钟的位置开始，这样较为符合人的阅读习惯，即从上到下、从左到右
任何时候，如果有“其他”这项分类，无论其占比多少都要放在最后，因为其数据通常是最不被关注的数据
突出图形重要数据，弱化不重要数据
重要数据一般是业务上重点强调的数据，也可能是用户最关注的数据，因此在设计图形前，明白数据的主次关系是至关重要的
图形用色技巧
1. 单色色块图更具易读性
通过改变颜色的饱和度和明度，单色系色块能够很好地在视觉上表现出对比关系
当设计色块图时，由于色彩的饱和度和明度呈现递增或递减，色块上的文字容易与色块失去对比性，导致易读性差，因此最好能给字体加描边或投影，增强其对比性
2. 用色有规律
位置可控的图形就需要有规律地呈现色彩
分组柱状图要慎用同色系颜色，否则不容易辨别分类。如果需要使用同色系，就一定要有规律地呈现，这样在视觉上不容易混淆
类似于这样分类过多的图形，都需要使用有规律的颜色，只有这样才不会因为用色接近而出现呈现上的混乱
3. 通过分类属性配色
通过分类属性配色，是迎合用户认知的一种配色技法
提到天空会想到蓝色，说起草坪会想到绿色，这就是人们共同的认知，而把这种认知运用到配色上，就会符合人们的心理预期
通过属性的寓意配色也是一种配色方法，这种配色方法的专业名称为“情绪板”
小孩的标签是活泼可爱的，因此就会想到其对应的颜色是黄色，而提到老人会想到用灰棕色、女人使用粉色、男人使用黑色和蓝色等
在配色时要考虑行业属性、产品属性、用户属性，因为只有找准特征才能把配色运用得更合理
图形添加说明的重要性
在图形上添加简单的说明，来告诉用户数据变化的原因，尤其在面对不知情的用户时，这会解决用户的疑惑
标题成就图形
标题也是展示数据的一个维度，可以用于呈现数据的结论和总量等
简洁，少即是多
简洁的图形往往让人在视觉上感觉更舒适，如果图形中呈现的数据太多，可能会导致用户无法获取全部信息
图形的扩展性设计
通过对图形进行扩展性设计可以让用户更容易理解数据、减少用户认知成本或增加数据维度的展
1. 图形结合图标设计
2. 图形结合形象元素设计
3. 图形结合业务关键词设计
4. 增加数据维度设计
