设计稿

Demo 链接

问题

解读

设计指引

数据

​date
time
​cpu(%)
yesterday
13:00
64.25676632707459
yesterday
13:05
72.16886580736812
today
13:00
100
today
13:05
100
下载源数据 ( .json 格式)
cpu-data.json.zip(1.15 kB)Download
三组数据,一组为日期标识,一组为秒级的时间序列的数据,另一组为百分比的数值,大概可以看到数值随着时间的推进有增有减。根据图表用法,我们能判定当前数据适合用折线图来表示。具体可参见折线图的图表用法

给谁看

有了图表类型后,我们来分析目标受众,他们可能是数据分析师、运营同学、决策者,他们的日常工作有一部分就是对数据进行监控分析,他们关心趋势走向以及波动归因。

看什么

监控分析场景中,用户关注当前指标值的走向以及超出预期是否能 hightlight 告之,因此在图上展示预警线十分有必要。用户只看到当前指标值可能还不够,他们可能更希望对比其他指标或者往期指标,必竟“无对比不分析”嘛,比如“昨日同期”,有了当前实时数据对比昨日同期后,能更直观对比监测当前 CPU 占用率情况。
在监控业务场景上,通常不能等出了问题再采取行动,更需要对数据进行预测,预知未来数据走向从而采取紧急预案避免事故发生。所以在图上,预测线也可以显示,纳入预警范围以辅助决策。
监控系统可能是一个整体,流畅性由各个部分一起决定。CPU 的占用率通常不一定是某个任务本身引起的,可能是因为磁盘已满、内存泄露甚至病毒感染造成的,如果我们能拿到磁盘或者内存使用情况,将其放在一个图,或者一个仪表盘上关联分析,用户就能直观看到原因,从而采取决策。

设计点

主标题

标题是用户读图的开始,也是你想要用户看到观点。此图名为“CPU 占用率实时监控 ”,这里包含两个信息点,一个是“CPU 占有率”,另一个是“实时监控”,表明当前用户看的是 CPU 占有率的实时数据。如果你的图表不需要标题,可以隐藏他们。

副标题

副标题作为说明性文本,可以从全局建立引导,让用户知道你想要表达什么,数据说明了什么。当用户第一次看到这个图表时,我们希望他知道数据更新频率为秒级,蓝色虚线为预测值。因此,我们建议必要时加上副标题,让用户从一开始就可以打消疑虑,帮助用户“有效”“清晰”的获取信息。如果你的图表不需要副标题,可以隐藏他们。

实时数据点

实时数据与离线数据区别是,实时数据的数据源为动态,一般每秒、每分钟同步一次。为了让用户感受到数据是动的,因此设计上用一个动态圆点作为有效区分,配合不断向右推进的时间轴,以吸引用户注意。

Y 值起始点

Y 轴要不要从 0 开始一直备受争议。我们建议设计者拿到数据时,需要纵观数值的波动区间以及图表传达的意图来决定 Y 值的起始点。此图虽然默认展示 3 小时数据,3 小时数据可能都在高位。如果右上角切换成看 24 小时数据,情况就不一样了,在夜间该服务器 CPU 负载是较低的,一般只有 5-10 或者 在 30 上下跳动,所以该图的 Y 轴的起始点为 0。

预警线

监控场景经常需要对某个指标数据进行监控并触发告警操作。在图上,设计者可以通配置预警线,预警区间等操作让超出的阈值更直观。

预测线

在监控场景中,AntV 的 G2 有专门的算法来提供拟合趋势线,以满足业务上对数据进行预测的需求。

时间区间

在监控场景中,为满足业务同学全盘掌控,更好地查看数据趋势。设计者可能需要添加时间筛选器,比如显示“最近 3 小时”、“最近 6 小时”、“最近 12 小时”、“最近 24 小时”。

颜色通道

在 AntV 可视化设计原则里,“清晰”的定义如下:表现方式清楚易读,有条理性,可以帮助用户快速达成目标,在最少的时间内获取更多的信息。
上述图中,除了看整体的占用趋势外,还需要比较两根折线“实时数据”与“昨日”数值,从信息层级上来说,当前周期“实时数据”相对优先于“昨日”,可视化设计师可以强调“实时数据”用蓝色表示,适当弱化“昨日”用灰色表示。将超出预警的线段用红色高亮表示出来。
在可视化的配色中,我们很容易忽略灰色阶的使用,灰色是一种很好的颜色,可以将图表中重要的内容与不重要的内容分开,从颜色的语义上彩色与灰色可以分别代表主次、现在及过去。当你有比较数据时,灰色通道特别好用。

求反馈

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