图例

图例位置图例翻页

功能描述:图例,配置 colorField 时显示,用于展示颜色分类信息

默认配置:

visible: true,
position: 'top',
flipPage: true
细分配置 类型 功能描述
visible boolean 是否可见
position string 位置,支持 12 方位布局
top-left, top-center,top-right
bottom-left,bottom-center,bottom-right
left-top,left-center,left-bottom
right-top,right-center,right-bottom
formatter function 对图例显示信息进行格式化
flipPage boolean 图例过多时是否翻页显示
offsetX number 图例在 position 的基础上再往 x 方向偏移量,单位 px
offsetY number 图例在 position 的基础上再往 y 方向偏移量,单位 px
marker string 图例 marker,默认为 'circle'
可选类型:circle,square,diamond,triangle,triangleDown,hexagon,bowtie,cross,tick,plus,hyphen,line,hollowCircle,hollowSquare,hollowDiamond

定义

图例解释了图表区域中包含的所有视觉元素的含义。

何时使用

对图表中的图形进行解释说明,用来映射图形的尺寸、颜色、数值大小等含义,帮助用户直观地理解图表。

元素

由映射图形形状 + 文本组成。

类型

根据数据类型不同,分为连续型图例分类型图例

根据状态不同,图例可以被设置为静态可交互态

常见问题

问题 1:如何决定图例的位置?

图例是对图形本身的概括。通常人的视觉动线是从上至下,从左到右。默认把图例放在左上角去做一个通用的方案看起来没毛病。 但更好的做法是:缩短用户对照图例看图形的本能路径,提升信息获取效率

虽然图例的位置从技术上支持了 12 个位置,我们总结了图例在不同的图表类型中不同的位置后,经过克制收敛为两类,并应用在 plot 图表类库中,以及智能生成图表工具中。

设计者和观看者甚至并不会感知到位置的变化,但是对应图形获取信息的效率就在不经意间提升了。

问题 2:图例太多怎么办?

在 G2Plot 中,图例如果占据了图表大部分的位置,你可以发现我们提供了翻页功能。