[TOC]

legend 图例

简介如何配置图例图例样式设置图例项样式设置图例的选择模式设置自定义 html 图例自定义图例常见问题简介图例（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图例的整体高度（用于连续图例）156itemWrap图例项过多时是否自动换行（用于分类图例）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，即不能取消勾选truespacingX用于调整各个图例项之间的水平间距左右图例 10，上下图例 16spacingY用于调整各个图例项之间的垂直间距左右图例 12，上下图例 10wordSpaceingmarker和文本之间的距离12unChecked未选中时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 图例来模拟默认生成的图例。 完整代码

自定义图例

  4.    charset="utf-8">
  5.   </span><span class="pln">自定义图例</span><span class="tag">
  6.    src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js">
  7.    src="https://a.alipayobjects.com/g/datavis/g2/2.3.13/g2.js">
  8.    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.   
  32.    id="mountNode">
  33.      id="legend">
  34.   
  36.

常见问题 1.隐藏图例

chart.legend(false); // 隐藏全部图例
chart.legend('x', false); // 只隐藏 x 维度对应的图例

2.更改图例位置

chart.legend('x', {
  position: 'bottom'
}); // 只更改 x 维度对应的图例的显示位置

3.图例显示位置不够 调整 plotCfg 属性中的 margin 值（margin 的介绍详见图表对象配置之图表样式）。

                    当前内容版权归 蚂蚁金服 或其关联方所有，如需对内容或内容相关联开源项目进行关注与资助，请访问 蚂蚁金服 .


                        上一篇:


                        下一篇:


            <div class="