折线图是通过点+线的方式绘制的数据可视化图表。XY两轴,通常能体现一段时间的数据趋势。同样尺寸下,所能表现的数据量要大于柱形图。另外折线图侧重于表现趋势,柱状图便于表现每个点。
设计目标
1.将数字数据以可视化的方式展现,便于用户快速理解阅读。
2.用户既能够看整体趋势,也能够查看具体数值细节。
使用场景
可用场景
1.需要可视化数据
2.要呈现一段时间的历史数据(横轴为时间)
3.数据量较大时
4.数据之间具有连续性可以输出趋势,
不可用场景
1.一个时间点下,分析占比时,建议使用饼图
2.多个数据之间没有连续性,没有输出趋势的必要。建议使用柱状图。
组件拆解
基础组件
- 基础折线图
元素:
1.折线图标题:内容主旨标题
2.折线图数据单位可选:数值单位
3.折折图图例:标明每条线分别代表什么数据
·当折线过多时,可以通过图例来开关是否显示/突显某条折线。
4折线图纵轴:一般表示数值
·纵轴区间最大值最小值根据实际需求做调整;最小值可以不为0,一般至少显示一个最小值一个最大值。
·纵轴可以根据图标内数值的大小实时变化区间。
·可以存在两个纵轴(一左一右)
5.折线图横轴:一般表示时间,年月日时分秒。
·根据时间跨度不同显示时间单位不同:年度=年,月度=年月,日度=月日、跨年首日写年,时度=时分、跨日会写月日,分度=时分、跨日写月日,秒度、时分秒、跨日会写月日
·如果图表设置了明确日期,那么横轴会以该日的00:00为起点24:00为终点。此时可以省略月日数据
·当横轴数据过密集,导致日期显示不下时,可以间隔几个日期显示一次,或倾斜显示所有日期。
6.折线图背景可选:折线图背景一般有纵轴对应的横线标尺
7.折线图折线:数据点及连接数据点的线
·一张图表折线数量不宜超过6条
·折线图不得使用曲线链接点与点,这将影响可视化的准确性
8.折线图悬停气泡:以横轴为基准,悬停在每个横轴值上时显示
·气泡内需要完整展示横轴值与其对应的所有数据。并配有图例。
交互规则
- 图表可以通过开关图例的方式,决定图表中显示/凸显哪些折线
- 图表可以通过鼠标悬停的方式,用气泡显示横轴值对应的折线数据。所悬停位置具有悬停效果(1、纵向直线,2、直线与折线交汇的数据点,3、背景的变色可选)
- 气泡(4)出现位置在鼠标附近,不得超出屏幕。气泡出现后不会随鼠标移动,鼠标离开触发区域/气泡时,气泡消失。
- 悬停范围应该是一个区域(范围通常与悬停时变化的背景色尺寸一致),而非一条纵向直线。
拓展形式
双纵轴折线图
- 当两条曲线数值区间差异过大又需要同时在一张图表里展示其相关性时使用
- 第二纵轴在右侧,图例、单位分列左右,分别对应不同的纵轴。
- 左右纵轴对应的折线线形要有所区别,如图所示左侧用实线,右侧用虚线。
折线面积图
- 面积图主要体现“总数”,第二条折线是在第一条折线的基础上向上累加的。最上方一条折线体现的是总数。
- 如果将纵轴值设为0%-100%那么折线面积图可以以时间为维度,展示一段时间的占比。
- 用法与饼图相同,区别在于饼图只能显示一个时间,面积图可以显示一段时间
可伸缩尺度折线图
- 通过拖动标尺两端,可以扩大缩小横轴纵轴范围,拖动时气泡显示当前区间
- 通过拖动标尺中间,可以在原大小下,改变覆盖范围,拖动时气泡显示当前区间
- 横轴可以进一步显示缩略的折线图,以便于用户认知。
DO/ DON’T准则
- 折线图折线不能使用圆角曲线
DO 折线图要准确表现数据趋势。
DON’T 对于控制台类需要准确数据的2B平台不能使用以美化为目的的曲线