图例
功能描述:图例,配置 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 中,图例如果占据了图表大部分的位置,你可以发现我们提供了翻页功能。