本文作者 字节跳动-数据平台-melon
引言
在做数据可视化相关的工作中,开发人员总是必不可免的需要与标签打打交道。在画布空间充裕,数据量不大,标签内容简洁的理想国中,一切自然不成问题。但是现实场景中,芜杂的需求,庞大的数据,向我们提出了要求:如何合理的组织标签的布局,从而尽可能多且美观的展示标签。
不同图表都有着其各自空间以及美学考量的特性,本文主要着眼于饼图的标签布局。
首先抛出一个普适的前提:画布空间是有限的,因此在其中能够有效展示的标签数量是有限制的。基于这一前提,我们有几个需要关注的问题:
如何合理排布标签,使得尽可能多的标签被显示?
如何在展示较多标签的情况下,保证标签的可读性,并使得用户能够直观的看出标签布局的逻辑?
在无法有效容纳所有标签的情况下,如何挑选更具有价值的标签信息展示?
相关产品饼图标签布局
在讨论饼图布局方案之前,首先让我们来看看其他产品的饼图布局:
G2
G2 饼图标签会按照饼图外圆进行排布,并用短连接线从扇区指向标签左端或者右端中点。
但是令人费解的是,在顶部以及底部的标签,其连接线却转为了弧线,并指向了标签上部或者下部,令人很难理解其处理逻辑为何,甚至于当标签较密时无法将标签与连接线相对应。
此外,也能看到其顶部和底部标签出现了重叠,导致失去了可读性。
ECharts
ECharts 对标签布局提供了几种方案,自左至右分别是 none,labelLine,edge,其分别意味着按照饼图外圆排布、标签水平方向对齐、标签按画布边缘对齐。三种方案,其标签位置的 Y 值均相同。究其本质,后两种方案其实就是 第一种方案的基础上改变了标签的 X 值 而已。
ECharts 饼图标签与扇区的连接线为两段线,第一段由扇区指出,第二段保证水平。
ECharts 相比较于 G2 而言,提供了标签相互躲避的算法,当标签数量非常大时,仍然保证了一定程度的可读性(后两种方案)