![写给UI设计师看的数据可视化设计](https://wfqqreader-1252317822.image.myqcloud.com/cover/705/38209705/b_38209705.jpg)
2.1.1 随时间变化图形
随时间变化图形,是对一段时间内数据的展示,如单个或多个分类数据之间的趋势变化和比较。常见的图形有折线图、柱状图、堆积柱状图、面积图、蜡烛图、瀑布图等。
1. 折线图
折线图常用于表示一个连续时间段内数据的变化趋势,主要功能是能够清晰地反映出数据随时间变化的趋势。如图2-1所示,折线图不仅能展示不同月份的温度趋势,还能清晰呈现数据的峰值和低谷。折线图也可以是多条线的,用来分析多组数据随时间变化的趋势及数据间的趋势比较。
![](https://epubservercos.yuewen.com/7DF7E2/20118171808700306/epubprivate/OEBPS/Images/040-1.jpg?sign=1738809732-sznTtLxRnd8TpwU46WCYT8jnG2bDHhkm-0-d5b80ee9212cc06036817034859af611)
图2-1
2. 柱状图
柱状图是最常用的数据可视化图形之一,可用于随时间变化而产生变量的数据统计中。如图2-2所示,柱状图能展示店铺每月销售额所对应的数据,也能反映出各个月份销售额的对比情况,并且通过图形能够快速了解销售额最多和最少的月份。
![](https://epubservercos.yuewen.com/7DF7E2/20118171808700306/epubprivate/OEBPS/Images/040-2.jpg?sign=1738809732-RQ9fRXCPnd36jL0xWZQMDLWUFj3clWJP-0-d609981f5cd126ac300a7ec722f1ff49)
图2-2
3. 堆积柱状图
堆积柱状图可以展示两个或多个数据的变化,以及数据之间的综合比较情况。如图2-3所示,两个店铺每月的总销售额用堆积柱状图展示,在坐标轴的每个品类上都有两个数据,可以形象地展示每个品类的数据总量。另外,还有一种是百分比堆积柱状图,每个柱子都是100%,柱子中有不同的占比分类。
![](https://epubservercos.yuewen.com/7DF7E2/20118171808700306/epubprivate/OEBPS/Images/041-1.jpg?sign=1738809732-B4TnKl7KhVP3nWlrRfXLyOP6O4UVCJvw-0-1fbea87d93453e679ad8891c7a41e981)
图2-3
4. 面积图
图2-4所示为面积图,展示了某个地区在一年内不同月份的降雨量数据,其能够形象地表示降雨量的多少。与折线图唯一不同的是,其自变量数据和坐标轴之间有颜色填充,这样能更加突出数据的趋势变化。在设计时,填充的颜色一般需要有透明度,这样在表示多组数据时就不会相互覆盖彼此的数据信息。
![](https://epubservercos.yuewen.com/7DF7E2/20118171808700306/epubprivate/OEBPS/Images/041-2.jpg?sign=1738809732-ieqCymIfvnslb0BPXdhL2JmNzwsEr7pu-0-882165b49319bfa41abfe89e8c4348df)
图2-4
5. 蜡烛图
在西方的技术分析领域中,蜡烛图也叫K线图,常用于股市和期货市场。图2-5所示为股票的K线图。K线是围绕开盘价、最高价、最低价、收盘价等来反映市场趋势和价格信息的,如图2-6所示。随着时间的推移,还可以呈现周K线图、月K线图等。
![](https://epubservercos.yuewen.com/7DF7E2/20118171808700306/epubprivate/OEBPS/Images/042-1.jpg?sign=1738809732-6uptMUYeKBjNdRkGHWn45FpgxjJ2TVTP-0-3d52fba5ad6accd8fa6e1ea7049adb21)
图2-5
![](https://epubservercos.yuewen.com/7DF7E2/20118171808700306/epubprivate/OEBPS/Images/042-2.jpg?sign=1738809732-iyjoq6f7gVjHR1Jv3obSXHPlVGto0T4k-0-3805b9db5c6eaa37c1d465d1b03b8897)
图2-6
6. 瀑布图
顾名思义,图形形似瀑布流水而被称为瀑布图,也被称为阶梯图。同样,它也可以呈现随时间变化的数据,展示某时间段内起点到终点的数据变化。不同于堆积柱状图,瀑布图能够重点突出数据变化的结果,以表示多个特定数据之间的变化关系。如图2-7所示,瀑布图直观地展示了每个月企业员工的增减数量,以及最终的结果统计数据。
![](https://epubservercos.yuewen.com/7DF7E2/20118171808700306/epubprivate/OEBPS/Images/043-1.jpg?sign=1738809732-nCmimiw59bEbCoBm0KG9h5kqj8I6hzdR-0-0e342b23aa4f564da2a1591edfc702f4)
图2-7