Legend 图例

阅读时间约 7 分钟

图例(legend)是图表的辅助元素,使用颜色、大小、形状区分不同的数据类型,用于图表中数据的筛选。G2 会根据设置图形属性映射以及数据的类型自动生成不同的图例。

  • shape, color, size 这三个图形属性如果判断接收的参数是数据源的字段时,会自动生成不同的图例;
  • shape 属性,会根据不同的 shape 类型生成图例;
  • color 属性,会赋予不同的图例项不同的颜色来区分图形;
  • size 属性,在图例上显示图形的大小。

通过 chart.legend([field, ]false) 可以关闭图例。

image | left

如何配置图例

调用 chart.legend() 进行图例的配置,使用方法如下所示:

chart.legend({
  position: 'bottom', // 设置图例的显示位置
  itemGap: 20, // 图例项之间的间距
});

chart.legend('cut', false); // 不显示 cut 字段对应的图例

chart.legend('price', {
  title: null, // 不展示图例 title
});

chart.legend(false); //所有的图例都不显示

图例整体样式设置

属性名解释默认值
position图例的显示位置,支持 12 个定位位置,配置值 'left-top','left-center','left-bottom','right-top','right-top','right-bottom','top-left','top-center','top-bottom','bottom-left','bottom-center','bottom-right'。也可使用'left'(默认为 left-bottom'),'right'(默认为'right-bottom'),'top'(默认为 top-center'),'bottom'(默认为 bottom-center') 定位。'bottom-center'
title用于图例标题的显示样式配置,如果值为 null 则不展示。左右两侧图例默认展示标题,上下图例默认不展示标题
background用于图例背景色的配置默认没有背景色
offsetX整个图例的水平偏移距离--
offsetY整个图例的垂直偏移距离--
width图例的整体宽度(用于连续图例)20
height图例的整体高度(用于连续图例)156
autoWrap图例项过多时是否自动换行(用于分类图例)true,自动换行
marker配置图例 marker 的显示样式,通过指定 marker.symbol 来改变不同的'circle''square''line''diamond''triangle''triangle-down''hexagon''bowtie''cross''tick''plus''hyphen'不同的几何标记不同的 marker
attachLast是否启用尾部跟随图例(适用于linelineStackareaareaStack图表类型)false

image

const data = [
  { year: 'Year 1800', region: 'Africa', population: 107 },
  { year: 'Year 1900', region: 'Africa', population: 133 },
  { year: 'Year 2012', region: 'Africa', population: 1052 },
  { year: 'Year 1800', region: 'America', population: 31 },
  { year: 'Year 1900', region: 'America', population: 156 },
  { year: 'Year 2012', region: 'America', population: 954 },
  { year: 'Year 1800', region: 'Asia', population: 635 },
  { year: 'Year 1900', region: 'Asia', population: 947 },
  { year: 'Year 2012', region: 'Asia', population: 4250 },
  { year: 'Year 1800', region: 'Europe', population: 203 },
  { year: 'Year 1900', region: 'Europe', population: 408 },
  { year: 'Year 2012', region: 'Europe', population: 740 },
  { year: 'Year 1800', region: 'Oceania', population: 2 },
  { year: 'Year 1900', region: 'Oceania', population: 6 },
  { year: 'Year 2012', region: 'Oceania', population: 38 },
];

const chart = new G2.Chart({
  container: 'legendMarker',
  width: 600,
  height: 350,
  padding: [20, 90, 95, 80],
});

chart.source(data);
chart.coord().transpose();
chart.legend({
  title: null, // 不展示图例的标题
  marker: 'square', // 设置图例 marker 的显示样式
});
chart.intervalDodge().position('region*population').color('year').label('population');
chart.render();

各个图例项样式设置

image | left

属性名解释默认值
allowAllCanceled(分类图例)是否保留一项不能取消勾选,默认为 false,即最后一项不能取消勾选false
unCheckColor未选中时 marker 的颜色'#bfbfbf'
textStyle图例项文本的样式配置{fill: '#3c3c3c'}
itemWidth图例项的宽度,当图例有很多图例项,并且用户想要这些图例项在同一平面内垂直对齐,此时这个属性可帮用户实现此效果--
itemFormatter用于格式化图例每项的文本显示,是个回调函数--

自定义图例

import { Chart } from '@antv/g2';

const data = [
  { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
  { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
  { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
  { name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
  { name: 'London', 月份: 'May', 月均降雨量: 47 },
  { name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
  { name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
  { name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
  { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
  { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
  { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
  { name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
  { name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 },
  { name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
  { name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
  { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 },
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
});

chart.data(data);

// 详细配置参考 API
chart.legend({
  items: [
    {
      name: 'London',
      marker: {
        symbol: 'square',
      },
    },
    {
      name: 'Berlin',
      marker: {
        symbol: 'square',
      },
    },
  ],
});

chart
  .interval()
  .position('月份*月均降雨量')
  .color('name')
  .adjust([
    {
      type: 'dodge',
      marginRatio: 0,
    },
  ]);

chart.render();

常见问题

    1. 隐藏图例
chart.legend(false); // 隐藏全部图例
chart.legend('x', false); // 只隐藏 x 维度对应的图例
    1. 更改图例位置
chart.legend('x', {
  position: 'bottom',
}); // 只更改 x 维度对应的图例的显示位置
    1. 图例显示位置不够

调整 padding 值(padding 的介绍详见API)。