设计稿

Demo 链接

问题

解读

设计指引

数据

日期
销售额(万)
2010-01
1998
2010-02
1850
2010-03
1720
下载源数据 ( .json 格式)
烟花累计销售额.json.zip(1.23 kB)Download
两个字段,一组为时间,另一组为统计值,数值随着时间的推进有增有减。根据图表用法,我们能判定当前数据适合用折线图或面积来表示。具体可参见折线图的图表用法

给谁看

类似公司销售额,盈亏分析等,一般是财务、数据分析师同学进行统计汇总给决策层或者投资者观看,属于典型的统计图表。

看什么

再回过头来看“数据”,一组为时间序列数据(日期时间维度),另一组为统计值(度量),刚我们决定用折线图来呈现它以便受众能在上面发现数据波动规律以及对异常点的解读。但一根折线的折线图显得如得单薄,在没有其他对比指标时,我们看下,能否从设计上进行弥补。

设计点

标题

在接触很多数据分析师或者运营同学后,发现不少人习惯性不加标题,他们的理由是看他报表的受众知道图上是什么指标。可他们也许不曾想过,一旦脱离了固定的报表阅读者,就很有可能看不懂了。因此我们建议除非必要,建议加上标题,标题是用户读图的开始,也是你想要用户看到观点。

副标题

副标题作为说明性文本,可以从全局建立引导,让用户知道你想要表达什么,数据说明了什么。当我们的受众第一次看到这个图表时,他读到“全国多地近年来陆续出台史上最严"禁燃令" ,导致烟花销售额持续下降。”就知道下滑的原因了。因此,AntV G2 建议必要时加上副标题,让受众从一开始就可以打消疑虑,帮助用户“有效”“清晰”的获取信息。

面积

在 AntV 可视化设计原则里,“清晰”、“有效”是两个重要参考指标。可视化图表的首要目的是帮助用户在最少的时间内获取更多的信息。
前面提到,当仅有一根折线时显得很单薄,建议在强化趋势、相对波动区间的信息时使用面积图。 查看面积图图表用法。我们使用蓝色面积强化波动区间,辅助识别趋势。

数据标记

当用户看到图上的异常点时,如果可视化设计者已知道答案,那么不妨通过标记方式写出来,告诉用户这里发生了什么,以及为什么会发生。这些标记紧跟相应区域,它不写在图表统一的下方,不需要用户在图上寻找对应点,避免视线来回扫描。我们在图上花更多时间制作更好的图表是帮助用户节省破译的时间。在图上我们增加了一个标记点,它表明整体下滑的另一个影响因素。

图例

图例(legend)是图表的辅助元素,使用颜色、大小、形状区分不同的数据类型,可用于图表中数据的筛选。当仅一根折线时,并不建议使用图例。上图中我们将折线所代表的指标在标题中加以说明,因此在图上对图例进行了省略。这让我们的数据墨水比率更高,通过更少元素传递更多的信息。

求反馈

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