阅读 1084

这一次,用 AntV 给你的老板画个饼

作者 新茗 蚂蚁金服·数据体验技术团队

TL;DR G2Plot 是一个注重于细节体验的通用统计图表库。

背景

饼图,或称饼状图,是一个划分为几个扇形的圆形统计图表。在饼图中,每个扇形的弧长(以及圆心角和面积)大小,表示该种类占总体的比例,且这些扇形合在一起刚好是一个完全的圆形。

作为最常见的图表之一,饼图大量的用于各行各业的报告中。例如,研报中经常会出现市场份额的分析。据中金公司研报,2017年我国的餐饮业营收额中,火锅占到22%,其次是自助餐(12%)、川菜(8%)、小吃快餐(8%)、西餐(6%)。这5种类型的餐饮,营收额占到了整个市场的56%,尤其以火锅占据绝对优势。

image.png

体验细琢

在实际的业务场景下,由于业务数据的千差万别,我们遇到了很多可视化展示的问题,其中在饼图中, label 问题较为凸显,有时甚至影响数据洞察。

inner 数据标签布局

🔥功能增强: label offset 可设置百分比,表示内置标签与圆弧距离 N%
🔥体验细琢:label 标签遮挡躲避,当label标签发生遮挡时,

echarts
image.png
❌直接遮挡显示
❌无法开启自动躲避、隐藏
❌标签只能显示在 -50% 处,无法设置
highcharts
image.png
❌默认不进行躲避、隐藏,✅可开启自动躲避、隐藏
G2Plot
image.png
✅自动躲避、隐藏
✅可开启全部显示

outer 数据标签的碰撞躲避

echarts
image.png
❌标签非常多的情况下,发生遮挡和重叠
highcharts
image.png
✅自动隐藏放置不下的标签,避免遮挡重叠
❌标签轨道是圆形轨道,随着半径的减小,可放置的标签数量会更少,导致准确性缺失
G2Plot
image.png
✅自动隐藏放置不下的标签,避免遮挡重叠
✅动态变换标签轨道为椭圆形轨道,放置更多的数据标签

outer 数据标签的溢出隐藏 & 省略

echarts
image.png
❌直接溢出、裁剪
highcharts
image.png
❌标签部分省略、但也有部分直接裁剪
G2Plot
image.png
**[省略规则] **
🔥显示优先级:视觉标记≥数值≥百分比≥分类名称
✅当标签溢出时,优先显示百分比,其次对分类名称进行省略显示

布局算法

根据 AntV 设计原则,饼图的label布局算法主要有以下几个创新点:

1)BBox计算,像素级别碰撞检测,保证精确性
2)碰撞偏移时,取偏离距离最小的方向作为目标方向,提高标签信息的有效性
3)碰撞偏移处理后,仍残存的遮挡或溢出标签,默认会进行隐藏,保证美观性

下面拿 inner 布局为例,简单介绍下算法的处理过程

inner label 算法

算法方案

  • 为了保证美观的目的,标准的 label 中心位置连接起来,其实是一个圆状轨道,每个 label 都在圆心和圆弧的中心连接轨道上
  • 当 label 发生遮挡的时候,会对 label 做一个偏移处理,保证 label 始终在圆心和圆弧的中心连接轨道上,与对应的饼图切片关联起来

image.png

执行过程
可以看到 label 在碰撞遮挡时的处理过程

动态效果图.gif

体验增强

增强一:合并极小项

合并项的明细数据,可以在 tooltip 显示,便于看全数据(此方案适用于数据总量不多不少,尾部数据占比较小且明细数据也有洞察价值的情况)。

该功能在 DeepInsight 中可以开启使用了,后续会沉淀到 G2Plot 中

image.png

增强二:多 label 类型组合

同时,对于 标签信息的位置,提供多种label类型组合,让信息传达更加明确

敬请期待

image.png

最后

饼图优化前后的一个对比情况如下:

image.png
image.png

上述对于饼图的优化点,都沉淀在** G2Plot **中,并且完全开源。G2Plot 是基于 G2 图形语法基础上,形成的一套注重图表细节体验、易用性的上统计图表库,从中提炼的 **AntV 设计原则 **是基于  Ant Design  设计体系衍生的,具有数据可视化特性的指导原则。它遵循 Ant Design 设计价值观的同时,对数据可视化领域的进一步解读,如色彩、字体的指引。

我们经过大量的项目实践和经验总结,总结了以下四条核心原则,并以重要等级进行排序,四条原则相辅相成且呈递进关系,希望你在设计时也可以采纳:

  • 准确:从数据转化到可视表达时不歪曲,不误导,不遗漏,忠实反映数据里包含的信息。
  • 有效:信息传达有重点,克制不冗余,避免信息过载,用最适量的数据-油墨比(Data-ink Ratio)表达对用户最有用的信息
  • 清晰:表现方式清楚易读,具条理性,可以帮助用户快速达成目标,在最少的时间内获取更多的信息。
  • :对数据的完美表达,合理利用视觉元素进行艺术创作,不过度修饰,给用户优雅的体验。

最后,非常欢迎参入 issue 讨论或者代码 PR:github.com/antvis/G2Pl…

关注下面的标签,发现更多相似文章
评论