教程

图例简介

图例（legend）是图表的辅助元素，使用颜色、大小、形状区分不同的数据类型，用于图表中数据的筛选。G2 会根据图形属性和数据的类型自动生成不同的图例。

图例和图形属性

我们在前面的章节中学习过图形属性，图形使用的属性会影响图例的生成：

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

图例语法

chart.legend({ 
  position: 'bottom',// 位置
  spacingX: 20 // 图例之间水平的间距
});

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

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

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

图例配置项

chart.legend(cfg) 或者 chart.legend(dim, cfg)。当第一个参数不传入 dim（图例对应的字段名）时，默认对所有图例生效。具体参数配置请参考 legend API。

cfg 配置属性 说明
position 图例的显示位置，有 'top','left','right','bottom'四种位置，默认是'right'。
itemWrap 图例是否自动换行，默认为 false，不换行，设置为 true 表示自动换行。
leaveChecked 是否保留一项不能取消勾选，默认为 false，即不能取消勾选。
back 图例外边框和背景的配置信息，是一个矩形。
spacingX 子项之间的间距，水平方向。
spacingY 子项之间的间距，垂直方向。
title 是否展示图例的标题，null 为不展示，默认 top bottom 两个位置的图例不展示。

chart.filter() 和图例

chart.filter('dim', arr)

可以过滤指定字段的数据，其中 arr 是一个数组，代表该 dim 字段你要保留的数据值。如果存在对应字段的图例，那么被过滤掉的类型会被取消选中，如下图表所示：

var data = [
  {"month":0,"tem":7,"city":"tokyo"},
  {"month":1,"tem":6.9,"city":"tokyo"},
  {"month":2,"tem":9.5,"city":"tokyo"},
  {"month":3,"tem":14.5,"city":"tokyo"},
  {"month":4,"tem":18.2,"city":"tokyo"},
  {"month":5,"tem":21.5,"city":"tokyo"},
  {"month":6,"tem":25.2,"city":"tokyo"},
  {"month":7,"tem":26.5,"city":"tokyo"},
  {"month":8,"tem":23.3,"city":"tokyo"},
  {"month":9,"tem":18.3,"city":"tokyo"},
  {"month":10,"tem":13.9,"city":"tokyo"},
  {"month":11,"tem":9.6,"city":"tokyo"},
  {"month":0,"tem":-0.2,"city":"newYork"},
  {"month":1,"tem":0.8,"city":"newYork"},
  {"month":2,"tem":5.7,"city":"newYork"},
  {"month":3,"tem":11.3,"city":"newYork"},
  {"month":4,"tem":17,"city":"newYork"},
  {"month":5,"tem":22,"city":"newYork"},
  {"month":6,"tem":24.8,"city":"newYork"},
  {"month":7,"tem":24.1,"city":"newYork"},
  {"month":8,"tem":20.1,"city":"newYork"},
  {"month":9,"tem":14.1,"city":"newYork"},
  {"month":10,"tem":8.6,"city":"newYork"},
  {"month":11,"tem":2.5,"city":"newYork"},
  {"month":0,"tem":-0.9,"city":"berlin"},
  {"month":1,"tem":0.6,"city":"berlin"},
  {"month":2,"tem":3.5,"city":"berlin"},
  {"month":3,"tem":8.4,"city":"berlin"},
  {"month":4,"tem":13.5,"city":"berlin"},
  {"month":5,"tem":17,"city":"berlin"},
  {"month":6,"tem":18.6,"city":"berlin"},
  {"month":7,"tem":17.9,"city":"berlin"},
  {"month":8,"tem":14.3,"city":"berlin"},
  {"month":9,"tem":9,"city":"berlin"},
  {"month":10,"tem":3.9,"city":"berlin"},
  {"month":11,"tem":1,"city":"berlin"}
];

var chart = new G2.Chart({
  id: 'c1',
  width: 800,
  height: 350
});

var defs = {'month':{
  type: 'cat',
  values: [
    '一月','二月','三月','四月','五月','六月',
    '七月','八月','九月','十月','十一月','十二月']
}};

chart.source(data,defs);

chart.filter('city', ['berlin']); // 只展示 berlin 的数据
chart.line().position('month*tem').color('city');
chart.render();