图例

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

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

    图例整体样式设置

    1. const 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. ];
    18.  
    19. const chart = new G2.Chart({
    20.   container: 'legendMarker',
    21.   width: 600,
    22.   height: 350,
    23.   padding: [ 20, 90, 95, 80 ]
    24. });
    25.  
    26. chart.source(data);
    27. chart.coord().transpose();
    28. chart.legend({
    29.   title: null, // 不展示图例的标题
    30.   marker: 'square' // 设置图例 marker 的显示样式
    31. });
    32. chart.intervalDodge().position('region*population').color('year').label('population');
    33. chart.render();

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

    图例的选择模式设置

    • 分类图例；

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

    • selectedMode: 'multiple' 多选，默认配置；

    • selectedMode: 'single' 单选；
    • clickable: false 禁用筛选。
      对于连续图例，声明 slidable: false 关闭筛选操作，默认开启筛选操作。
    1. const data = [
    2.   { 部门: '部门0', 小组: '组名0', 完成人数: 37, 未完成人数: 9 },
    3.   { 部门: '部门0', 小组: '组名2', 完成人数: 29, 未完成人数: 10 },
    4.   { 部门: '部门0', 小组: '组名8', 完成人数: 59, 未完成人数: 14 },
    5.   { 部门: '部门0', 小组: '组名9', 完成人数: 60, 未完成人数: 8 },
    6.   { 部门: '部门0', 小组: '组名10', 完成人数: 83, 未完成人数: 14 },
    7.   { 部门: '部门0', 小组: '组名12', 完成人数: 67, 未完成人数: 21 },
    8.   { 部门: '部门0', 小组: '组名14', 完成人数: 46, 未完成人数: 18 },
    9.   { 部门: '部门0', 小组: '组名17', 完成人数: 19, 未完成人数: 27 },
    10.   { 部门: '部门0', 小组: '组名19', 完成人数: 74, 未完成人数: 17 },
    11.   { 部门: '部门1', 小组: '组名15', 完成人数: 34, 未完成人数: 19 },
    12.   { 部门: '部门1', 小组: '组名20', 完成人数: 71, 未完成人数: 25 },
    13.   { 部门: '部门1', 小组: '组名26', 完成人数: 28, 未完成人数: 23 },
    14.   { 部门: '部门1', 小组: '组名29', 完成人数: 90, 未完成人数: 24 },
    15.   { 部门: '部门2', 小组: '组名7', 完成人数: 50, 未完成人数: 5 },
    16.   { 部门: '部门2', 小组: '组名11', 完成人数: 86, 未完成人数: 26 },
    17.   { 部门: '部门2', 小组: '组名13', 完成人数: 63, 未完成人数: 16 },
    18.   { 部门: '部门2', 小组: '组名27', 完成人数: 76, 未完成人数: 2 },
    19.   { 部门: '部门2', 小组: '组名28', 完成人数: 13, 未完成人数: 28 },
    20.   { 部门: '部门3', 小组: '组名1', 完成人数: 33, 未完成人数: 16 },
    21.   { 部门: '部门3', 小组: '组名3', 完成人数: 14, 未完成人数: 1 },
    22.   { 部门: '部门3', 小组: '组名4', 完成人数: 43, 未完成人数: 25 },
    23.   { 部门: '部门3', 小组: '组名16', 完成人数: 45, 未完成人数: 13 },
    24.   { 部门: '部门3', 小组: '组名18', 完成人数: 50, 未完成人数: 21 },
    25.   { 部门: '部门3', 小组: '组名22', 完成人数: 43, 未完成人数: 7 },
    26.   { 部门: '部门3', 小组: '组名23', 完成人数: 38, 未完成人数: 6 },
    27.   { 部门: '部门3', 小组: '组名24', 完成人数: 33, 未完成人数: 24 },
    28.   { 部门: '部门3', 小组: '组名25', 完成人数: 13, 未完成人数: 27 },
    29.   { 部门: '部门4', 小组: '组名6', 完成人数: 88, 未完成人数: 12 },
    30.   { 部门: '部门4', 小组: '组名21', 完成人数: 52, 未完成人数: 9 }
    31. ];
    32.  
    33. const DataView = DataSet.DataView;
    34. const dv = new DataView();
    35. dv.source(data)
    36.   .transform({
    37.     type: 'sort',
    38.     callback: (obj1, obj2) => {
    39.       return obj1['部门'] > obj2['部门'] ? 1 : -1;
    40.     }
    41.   })
    42.   .transform({
    43.     type: 'map',
    44.     callback: obj => {
    45.       obj['完成人数'] *= -1; // 将完成人数转换成负数
    46.       return obj;
    47.     }
    48.   })
    49.   .transform({
    50.     type: 'fold',
    51.     fields: ['完成人数', '未完成人数'],
    52.     key: '完成状态',
    53.     value: '人数'
    54.   });
    55. const chart = new G2.Chart({
    56.   container: 'c1',
    57.   forceFit: true,
    58.   height: 400,
    59.   padding: [ 5, 100, 80 ]
    60. });
    61. chart.source(dv);
    62. chart.filter('部门', val => {
    63.   return val === '部门0';
    64. });
    65. chart.coord().transpose();
    66. // 关键代码：设置对应图例的选择模式
    67. chart.legend('部门', {
    68.   selectedMode: 'single',
    69.   position: 'right-bottom',
    70.   hoverable: false
    71. });
    72. chart.legend('完成状态', false);
    73. chart.axis('人数', {
    74.   label: {
    75.     formatter: value => {
    76.       value = parseInt(value);
    77.       return Math.abs(value); // 将负数格式化成正数
    78.     }
    79.   }
    80. });
    81. chart.interval()
    82.   .position('小组*人数')
    83.   .color('部门')
    84.   .shape('完成状态', [ 'rect', 'hollowRect' ])
    85.   .style({
    86.     lineWidth: 1
    87.   });
    88. chart.render();

    G2 支持使用 html 渲染图例，方式非常简单，只要声明 useHtml: true 即可。

    1. const data = [
    2.   { country: 'Lithuania', litres: 501.9 },
    3.   { country: 'Czech Republic', litres: 301.9 },
    4.   { country: 'Ireland', litres: 201.1 },
    5.   { country: 'Germany', litres: 165.8 },
    6.   { country: 'Australia', litres: 139.9 },
    7.   { country: 'Austria', litres: 128.3 },
    8.   { country: 'UK', litres: 99 },
    9.   { country: 'Belgium', litres: 60 },
    10.   { country: 'The Netherlands', litres: 50 }
    11. ];
    12.  
    13. const ds = new DataSet();
    14. const dv = ds.createView()
    15.   .source(data)
    16.   .transform({
    17.     field: 'litres',
    18.     dimension: 'country',
    19.     as: 'percent'
    20.   });
    21.  
    22. const chart = new G2.Chart({
    23.   container: 'c2',
    24.   width: 500,
    25.   height: 500,
    26.   padding: [ 20, 120, 20, 160 ]
    27. });
    28. chart.source(dv, {
    29.   percent: {
    30.     formatter: val => {
    31.       val = (val * 100).toFixed(2) + '%';
    32.       return val;
    33.     }
    34.   },
    35.   nice: false
    36. });
    37. chart.coord('theta', {
    38.   innerRadius: 0.3,
    39.   radius: 1
    40. });
    41. chart.tooltip({
    42.   showTitle: false, // 不展示标题
    43.   itemTpl: '<li data-index={index}><span style="color:{color}">{name}:</span>{value}</li>'
    44. });
    45. chart.legend({
    46.   useHtml: true,
    47.   position: 'right',
    48.   containerTpl: '<div class="g2-legend">' +
    49.     '<table class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></table>' +
    50.     '</div>',
    51.   itemTpl: (value, color, checked, index) => {
    52.     const obj = dv.rows[index];
    53.     checked = checked ? 'checked' : 'unChecked';
    54.     return '<tr class="g2-legend-list-item item-' + index + ' ' + checked +
    55.       '" data-value="' + value + '" data-color=' + color +
    56.       ' style="cursor: pointer;font-size: 14px;">' +
    57.       '<td width=150 style="border: none;padding:0;"><i class="g2-legend-marker" style="width:10px;height:10px;display:inline-block;margin-right:10px;background-color:' + color + ';"></i>' +
    58.       '<span class="g2-legend-text">' + value + '</span></td>' +
    59.       '<td style="text-align: right;border: none;padding:0;">' + obj.litres + '</td>' +
    60.       '</tr>';
    61.   },
    62.   offsetX: 15,
    63.   'g2-legend': {
    64.     marginLeft: '100px',
    65.     marginTop: '-107px'
    66.   },
    67.   'g2-legend-list': {
    68.     border: 'none'
    69.   }
    70. });
    71. chart.filter('country', val => {
    72.   return val !== 'UK';
    73. });
    74. chart.intervalStack()
    75.   .position('percent')
    76.   .color('country', [ '#67b7dc', '#84b761', '#fdd400', '#cc4748', '#cd82ad', '#2f4074', '#448e4d', '#b7b83f', '#b9783f' ])
    77.   .label('percent', {
    78.     formatter: (val, item) => {
    79.       return item.point.country + ': ' + val;
    80.     }
    81.   })
    82.   .style({
    83.     lineWidth: 2,
    84.     stroke: '#fff'
    85.   });
    86. chart.render();

    常见问题

    • 1.隐藏图例
    • 2.更改图例位置
    1. chart.legend('x', {
    2.   position: 'bottom'
    3. }); // 只更改 x 维度对应的图例的显示位置
    • 3.图例显示位置不够
      调整 padding 值（padding 的介绍详见）。