- 写给UI设计师看的数据可视化设计
- 吴星辰
- 876字
- 2025-02-18 02:25:27
2.1.1 随时间变化图形
随时间变化图形,是对一段时间内数据的展示,如单个或多个分类数据之间的趋势变化和比较。常见的图形有折线图、柱状图、堆积柱状图、面积图、蜡烛图、瀑布图等。
1. 折线图
折线图常用于表示一个连续时间段内数据的变化趋势,主要功能是能够清晰地反映出数据随时间变化的趋势。如图2-1所示,折线图不仅能展示不同月份的温度趋势,还能清晰呈现数据的峰值和低谷。折线图也可以是多条线的,用来分析多组数据随时间变化的趋势及数据间的趋势比较。

图2-1
2. 柱状图
柱状图是最常用的数据可视化图形之一,可用于随时间变化而产生变量的数据统计中。如图2-2所示,柱状图能展示店铺每月销售额所对应的数据,也能反映出各个月份销售额的对比情况,并且通过图形能够快速了解销售额最多和最少的月份。

图2-2
3. 堆积柱状图
堆积柱状图可以展示两个或多个数据的变化,以及数据之间的综合比较情况。如图2-3所示,两个店铺每月的总销售额用堆积柱状图展示,在坐标轴的每个品类上都有两个数据,可以形象地展示每个品类的数据总量。另外,还有一种是百分比堆积柱状图,每个柱子都是100%,柱子中有不同的占比分类。

图2-3
4. 面积图
图2-4所示为面积图,展示了某个地区在一年内不同月份的降雨量数据,其能够形象地表示降雨量的多少。与折线图唯一不同的是,其自变量数据和坐标轴之间有颜色填充,这样能更加突出数据的趋势变化。在设计时,填充的颜色一般需要有透明度,这样在表示多组数据时就不会相互覆盖彼此的数据信息。

图2-4
5. 蜡烛图
在西方的技术分析领域中,蜡烛图也叫K线图,常用于股市和期货市场。图2-5所示为股票的K线图。K线是围绕开盘价、最高价、最低价、收盘价等来反映市场趋势和价格信息的,如图2-6所示。随着时间的推移,还可以呈现周K线图、月K线图等。

图2-5

图2-6
6. 瀑布图
顾名思义,图形形似瀑布流水而被称为瀑布图,也被称为阶梯图。同样,它也可以呈现随时间变化的数据,展示某时间段内起点到终点的数据变化。不同于堆积柱状图,瀑布图能够重点突出数据变化的结果,以表示多个特定数据之间的变化关系。如图2-7所示,瀑布图直观地展示了每个月企业员工的增减数量,以及最终的结果统计数据。

图2-7