简介

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

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

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

image

如何配置图例

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

  1. chart.legend({
  2.   position: 'bottom', // 设置图例的显示位置
  3.   spacingX: 20 // 图例项之间的水平间距
  4. });
  6. chart.legend('cut', false); // 不显示 cut 字段对应的图例
  8. chart.legend('price', {
  9.   title: null // 不展示图例 title
  10. });
  12. chart.legend(false); //所有的图例都不显示

图例样式设置

属性名解释默认值
position图例的显示位置，可配置值 'top','left','right','bottom' 。'right'
title用于图例标题的显示样式配置，如果值为 null 则不展示。左右两侧图例默认展示标题，上下图例默认不展示标题
back用于图例背景色的配置默认没有背景色
dx整个图例的水平偏移距离—
dy整个图例的垂直偏移距离—
width图例的整体宽度（用于连续图例）20
height图例的整体高度（用于连续图例）156
itemWrap图例项过多时是否自动换行（用于分类图例）false
marker配置图例 marker 的显示样式，支持指定 point 几何标记支持的所有 shape(除去 'rect')：'circle', 'square', 'bowtie', 'diamond', 'hexagon', 'triangle', 'triangle-down', 'hollowCircle', 'hollowSquare', 'hollowBowtie', 'hollowDiamond', 'hollowHexagon', 'hollowTriangle', 'hollowTriangle-down', 'cross', 'tick', 'plus', 'hyphen', 'line''circle'
  1. var data = [
  2.   {'year': 'Year 1800', 'region': 'Africa', population: 107},
  3.   {'year': 'Year 1900', 'region': 'Africa', population: 133},
  4.   {'year': 'Year 2012', 'region': 'Africa', population: 1052},
  5.   {'year': 'Year 1800', 'region': 'America', population: 31},
  6.   {'year': 'Year 1900', 'region': 'America', population: 156},
  7.   {'year': 'Year 2012', 'region': 'America', population: 954},
  8.   {'year': 'Year 1800', 'region': 'Asia', population: 635},
  9.   {'year': 'Year 1900', 'region': 'Asia', population: 947},
  10.   {'year': 'Year 2012', 'region': 'Asia', population: 4250},
  11.   {'year': 'Year 1800', 'region': 'Europe', population: 203},
  12.   {'year': 'Year 1900', 'region': 'Europe', population: 408},
  13.   {'year': 'Year 2012', 'region': 'Europe', population: 740},
  14.   {'year': 'Year 1800', 'region': 'Oceania', population: 2},
  15.   {'year': 'Year 1900', 'region': 'Oceania', population: 6},
  16.   {'year': 'Year 2012', 'region': 'Oceania', population: 38}
  17. ];
  19. var chart = new G2.Chart({
  20.   id: 'legendMarker',
  21.   width: 600,
  22.   height: 350,
  23.   plotCfg: {
  24.     margin: [20, 90, 60, 80]
  25.   }
  26. });
  28. chart.source(data);
  29. chart.coord().transpose();
  30. chart.axis('region', {
  31.   title: null
  32. });
  33. chart.axis('population', {
  34.   titleOffset: 25
  35. });
  36. chart.legend({
  37.   title: null, // 不展示图例的标题
  38.   marker: 'square' // 设置图例 marker 的显示样式
  39. });
  40. chart.intervalDodge().position('region*population').color('year').label('population');
  41. chart.render();

图例项样式设置

image

属性名解释默认值
leaveChecked(分类图例)是否保留一项不能取消勾选，默认为 true，即不能取消勾选true
spacingX用于调整各个图例项之间的水平间距左右图例 10，上下图例 16
spacingY用于调整各个图例项之间的垂直间距左右图例 12，上下图例 10
wordSpaceingmarker和文本之间的距离12
unChecked未选中时marker的颜色'#CCC'
word图例项文本的样式配置{fill: '#3c3c3c'}

图例的选择模式设置

在 G2 中，图例分为两种：

  • 分类图例；

  • 连续图例。对于分类图例的筛选，G2 提供了三种方式：

  • multiple 多选，默认配置；

  • single 单选；
  • false 禁用筛选。对于连续图例，只支持 mode: false([email protected] 及以上使用 mode，2.3.0 以下版本请使用 selectedMode) 关系筛选操作，默认开启。

通过如下代码即可进行配置：

  1. // 对所有图例进行配置
  2. chart.legend({
  3.   // [email protected] 及以上使用 `mode`，2.3.0 以下版本请使用 `selectedMode`
  4.   mode: 'single' // 选择单选模式
  5. });
  7. // 对某个图例进行配置
  8. chart.legend('x', {
  9.   // [email protected] 及以上使用 `mode`，2.3.0 以下版本请使用 `selectedMode`
  10.   mode: 'false' // 禁用图例筛选
  11. });

自定义 html 图例

如果默认生成的图例满足不了需求时，G2 还提供了一系列接口以支持用户自定义 html 图例。自定义图例主要调用方法如下：

  • 获取所有的几何标记对象 chart.getAllGeoms();
  • 获取每个几何标记所有 shape 的数据， geom.getData()

geom.getData() 返回的是一个数组，数组中每条记录会包含映射后的数据以及对应的原始数据记录，数据结构如下图所示：

下面的实例就展示了如何使用这些接口结合 plotclick 事件实现一个自定义 html 图例来模拟默认生成的图例。

完整代码

自定义图例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>自定义图例</title>
  6.   <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
  7.   <script src="https://a.alipayobjects.com/g/datavis/g2/2.3.13/g2.js"></script>
  8.   <style type="text/css">
  9.     #legend .item{
  10.       cursor:pointer;
  11.     }
  12.     #legend .item td{
  13.       width: 25%;
  14.       padding: 4px 10px;
  15.     }
  16.     #legend .dot{
  17.       display: inline-block;
  18.       width: 10px;height: 10px;
  19.       border-radius: 50%;
  20.       margin: 0 5px 0 0;
  21.     }
  23.     #legend {
  24.       width: 300px;
  25.       margin: 0 auto;
  26.       text-align:left;
  27.       border-collapse: collapse;
  28.     }
  29.   </style>
  30. </head>
  31. <body>
  32.   <div id="mountNode">
  33.     <table id="legend"></table>
  34.   </div>
  36.   <script>
  37.     var data = [
  38.       {name: '禁用', value: 10},
  39.       {name: '限制', value: 20},
  40.       {name: '正常', value: 40}
  41.     ];
  42.     var Util = G2.Util;
  43.     var Stat = G2.Stat;
  44.     var chart = new G2.Chart({
  45.       id: 'mountNode',
  46.       forceFit: true,
  47.       height: 300
  48.     });
  49.     chart.source(data);
  50.     chart.coord('theta', {
  51.       inner: 0.8 // 设置饼图的大小
  52.     });
  54.     chart.legend(false); // 关掉自带图例
  55.     chart.intervalStack().position(Stat.summary.percent('value')).color('name');
  56.     chart.render();
  58.     var geom = chart.getGeoms()[0]; // 获取所有的图形
  59.     var items = geom.getData(); // 获取图形对应的数据
  60.     var stash = {};
  62.     for(var i=0, l=items.length; i< l;i++) {
  63.       var item = items[i];
  64.       var itemData = item._origin;
  65.       var color = item.color;
  66.       var name = itemData.name;
  67.       var value = itemData.value;
  69.       var trHtml = '<tr class="item" data-name="' + name + '">' +
  70.         '<td></td>' +
  71.         '<td><span class="dot" style="background:' + color + ';"></span>' + name + '</td>' +
  72.         '<td>' + value + '</td>' +
  73.         '<td></td></tr>';
  74.       var dom = $(trHtml).appendTo('#legend');
  75.       stash[name] = {
  76.         dotDom : dom.find('.dot'),
  77.         item: item,
  78.         color: color,
  79.         name: name,
  80.         isChecked: true
  81.       }
  82.     }
  84.     $(".item").click(function() {
  85.       var name = $(this).data('name');
  86.       filter(name);
  87.     });
  89.     function filter(name){
  90.       var obj = stash[name];
  91.       var filterNames = [];
  93.       obj.isChecked = obj.isChecked ? false : true;
  94.       Util.each(stash, function(v){
  95.         if(v.isChecked){
  96.           v.dotDom.css('background', v.color);
  97.           filterNames.push(v.name);
  98.         }else{
  99.           v.dotDom.css('background', '#999');
  100.         }
  101.       });
  102.       chart.filter('name', filterNames)
  103.       chart.repaint();
  104.     }
  105.   </script>
  106. </body>
  107. </html>

常见问题

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

调整 plotCfg 属性中的 margin 值（margin 的介绍详见图表对象配置之图表样式）。