设计稿

Demo 链接

问题

你可能会发现图上有两根折线随着时间的推进波动略有差异,蓝色折线上有一个峰值,一个谷值为 0,即异常点已给出“解读”,“当前周期”相比“上一周期”数据略有增长,这是为什么呢?且数据开始时间略早,结束时间略晚,这背后有有什么原因呢?

解读

设计指引

数据

Time
Count​
​2018/8/9 00:00:00
​489
​2018/8/9 01:00:00
​389
2018/8/9 02:00:00
0
下载源数据 ( .json 格式)
某网站 24 小时 UV 趋势.zip(0.89 kB)Download
先看下“数据”,如上表格所示,包含两组数据,一组为时间,另一组为统计值,大概可以看到数值随着时间的推进有增有减。根据图表用法,我们能判定当前数据适合用折线图来表示。具体可参见折线图的图表用法

给谁看

有了图表类型后,我们来分析目标受众,以上述数据为例,他包含 UV 统计信息,是满足数据分析师、运营同学进行监控分析场景的,他们关注的是趋势走向以及数据波动的原因。所以图上应该体现出他们关心的核心信息。

看什么

再回过头来分析下“数据”,一组为时间序列数据(日期时间维度),另一组为数值(度量),刚我们决定用折线图来呈现它以便受众能在上面发现数据波动规律以及对异常点的解读。但仅看今日数据,而没有参考值无法直观看出差异,我们应该给用户提供可以进行相关变量和趋势的对比,比如拿昨天的数据波动跟今天的对比。对比是分析常用的手法,可以更快速发现差异。

设计点

标题

标题是用户读图的开始,也是你想要用户看到观点。因此我们命名为“网站 24 小时 UV 访问趋势”,这里包含两个不可忽视的信息,一个是“24 小时”,另一个是“UV”,两个限定语表明了当前图表说的 24 小时内的数据,且折线表是的是“UV”信息。如果你的图表不需要标题,可以隐藏他们。

副标题

副标题作为说明性文本,可以从全局建立引导,让用户知道你想要表达什么,数据说明了什么。当我们的受众第一次看到这个图表时,他可能会发现“当前周期”的数据略早于“上一周期”,但背后的根本原因是什么了。如果可视化设计者不告诉他原因,那么他会带着这个问题一直往下看,可能还是发现不了原因。因此,G2 建议必要时加上副标题,让受众从一开始就可以打消疑虑,帮助用户“有效”“清晰”的获取信息。如果你的图表不需要副标题,可以隐藏他们。

颜色通道

在 AntV 可视化设计原则里,“清晰”的定义如下:表现方式清楚易读,具条理性,可以帮助用户快速达成目标,在最少的时间内获取更多的信息。
上述图中,除了看整体的访问趋势外,还需要比较两根折线“当前周期”与“上一周期”在不同横坐标位置上值的大小,从信息层级上来说,当前周期相对优先于“上一周期”,可视化设计师可以强调“当前周期”,适当弱化“上一周期”。这符合认知心理学的定义:某事物一旦被选为知觉对象,就好像立即从背景中突现出来,被认识得更鲜明、更清晰。
因此在用色时,我们使用蓝色强调当前周期,使用灰色弱化上一周期。灰色是一种很好中性色,可以将图表中重要的内容与不重要的内容分开。 当你有比较数据时,灰色通道的使用特别必要。从颜色的语义上通道有色与无色就能直观区分主次、当下发生的以及过去发生的。

峰谷值标记

折线图通常用于看趋势比较分析,分析者希望进行的比较操作,其核心在于希望认清对象之间各方面的关系,例如识别对象间有怎样的对比关系,对象之间某个值上差距有多大、怎样量化,以及怎样合理地、显性化地展示这些差距。 在折线图上,可以特定显示某个值的数据标签,如峰谷值,以辅助更快速发现业务问题。

图例

图例(legend)是图表的辅助元素,使用颜色、大小、形状区分不同的数据类型,可用于图表中数据的筛选。G2 提供十二方位的图例位置以及“图例跟随”功能。“图例跟随”使用场景:适合于图例顺序与折线顺序不能匹配时。“图例跟随”能“有效”解决看图例寻找相应数据的问题。你可以通过配置项<API>配置他们。

求反馈

该文档对你有帮助吗?如果觉得不错请赏“稻谷”,如果有任何意见建议,欢迎留言探讨