config-图例

下面的文档介绍中提到的 legend 等同于图例。

配置方式

关闭图例

关闭所有图例

config.legend = false;
// or
config.legend = { visible: false };

关闭指定 Field 的图例

config.legend = ['y', false];

开启图例

为默认 field 指定图例

config.legend = {};

为特定列设置图例

config.legend = [field, cfg];

属性列表

G2

position: String

设置图例的显示位置，可设置的值为 12 个

也可使用bottom,top,left,right设置位置，此时对应的值分别为bottom-center,top-center,left-bot|tom,right-bottom。默认为 bottom-center。

layout: String

用于设置各个图例项的排列方式，可设置值包括：vertical、horizontal，分别表示垂直和水平排布。

title: Object|null

图例标题的显示样式设置，如果值为 null，表示不展示图例标题，默认不展示。

title: {
  textAlign: 'center', // 文本对齐方向，可取值为： start middle end
  fill: '#404040', // 文本的颜色
  fontSize: '12', // 文本大小
  fontWeight: 'bold', // 文本粗细
  rotate: 30, // 文本旋转角度，以角度为单位，仅当 autoRotate 为 false 时生效
  textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
}

background: Object

针对分类类型的图例，用于设置图例的背景样式。

background: {
  fill: '#000',
  fillOpacity: 0.3
}

itemFormatter: Function

回调函数，用于格式化图例每项的文本显示。

itemFormatter(val) {
  return val; // val 为每个图例项的文本值
}

marker: String|Function

用于设置图例的 marker 样式，默认按照 geom 的类型显示。

• 当为 string 类型时，即表示使用 G2 默认提供的类型，支持的类型如下。其中只有一部分支持 HTML 版本的分类图例：

type	样式	是否支持 HTML
'circle'		是
'square'		是
'bowtie'		否
'diamond'		否
'hexagon'		否
'triangle'		否
'triangle-down'		否
'cross'		否
'tick'		否
'plus'		否
'hyphen'		否
'line'		否
hollowCircle		否
'hollowSquare'		否
'hollowBowtie'		否
'hollowDiamond'		否
'hollowHexagon'		否
'hollowTriangle'		否
'hollowTriangle-down'		否

• 非 HTML 版本的分类图例的 marker 也支持自定义 shape，使用方式如下，

/**
 * 自定义 marker 形状
 * @param  {number} x   该 marker 的横轴坐标
 * @param  {number} y   该 marker 的纵轴坐标
 * @param  {number} r   该 marker 的半径大小
 * @return {null}
 */
marker(x, y, r) {}

以下代码绘制了如图所示的 marker ：

marker(x, y, r) {
  return [
    [ 'M', x - r, y ],
    [ 'L', x + r, y ]
  ];
}

textStyle: Object

用于设置图例项的文本样式。

textStyle: {
  textAlign: 'center', // 文本对齐方向，可取值为： start middle end
  fill: '#404040', // 文本的颜色
  fontSize: '12', // 文本大小
  fontWeight: 'bold', // 文本粗细
  rotate: 30, // 文本旋转角度，以角度为单位，仅当 autoRotate 为 false 时生效
  textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
}

clickable: Boolean

针对分类类型的图例，设置图例项是否允许点击，默认为 true，即允许点击。

selectedMode: String

针对分类类型图例，当 clickable 为 true 时该配置项生效，用于设置图例的选中交互模式，可配置的属性:

• selectedMode: 'single'：表示开启单选模式；
• selectedMode: 'multiple'：表示开启多选模式，默认为 'multiple'。

/**
 * 自定义图例项鼠标 hover 事件，hoverable 为 false 不生效
 * @param  {object} ev 事件对象
 * @return {null}
 */
onHover: ev => {};

onClick: Function

针对分类类型的图例，用于自定义鼠标点击图例项的交互，当 clickable 为 false 不生效。

/**
 * 自定义图例项点击事件， clickable 为 false 不生效
 * @param  {object} ev 事件对象
 * @return {null}
 */
onClick: ev => {};

useHtml: Boolean

针对分类类型图例，用于开启是否使用 HTML 渲染图例，默认为 false，true 表示使用 HTML 渲染图例。这种情况下不要使用 'legend-item:click'  建议使用   onClick

chart.legend({
  useHtml: true,
  onClick: e => {
    console.log('e', e);
  },
});

flipPage: Boolean

针对 HTML 版本的分类类型图例，即 useHtml 为 true 时。指定是否使用翻页的方式来交互超出容器的图例项。默认为 false ，即不使用翻页方式，而使用滚轮滚动的交互方式。

container: String

当 useHtml 为 true 时生效，用于指定生成图例的 dom 容器，那么该值必须为 dom 容器的 id 值为分类类型的话，则支持传入索引值。

containerTpl: String

当 useHtml 为 true 时生效，用于指定图例容器的模板，默认值如下：

containerTpl: '<div class="g2-legend" style="position:absolute;top:20px;right:60px;width:auto;">' +
  '<h4 class="g2-legend-title"></h4>' +
  '<ul class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></ul>' +
  '</div>';

如默认结构不满足需求，可以自定义该模板，但是自定义模板时必须包含各个 dom 节点的 class，样式可以自定义。

itemTpl: String

当 useHtml 为 true 时生效，用于指定生成图例的图例项 HTML 模板，默认值如下：

1. itemTpl: string
   当 useHtml 为 true 时生效。HTML 版本的分类图例的图例项 HTML 模版。默认为：

itemTpl: '<li class="g2-legend-list-item item-{index} {checked}" data-color="{originColor}" data-value="{originValue}">' +
  '<i class="g2-legend-marker" style="background-color:{color};"></i>' +
  '<span class="g2-legend-text">{value}</span></li>';

!注意：自定义模板时必须包含各个 dom 节点的 class，样式可以自定义。

slidable: Boolean

针对连续图例，用于设置连续图例是否允许滑动，默认为 true，即开启滑动操作。

width: Number

针对连续图例，用于设置图例的宽度。

height: Number

针对连续图例，用于设置图例的高度。

hoverable: Boolean

针对分类图例，设置是否开启鼠标 hover 至图例的交互效果，默认为 true，即开启动画。

onHover: event => void

用于自定义鼠标 hover 图例项的交互，当 hoverable 为 false 不生效。

tip: boolean

是否开启legendhover状态下悬浮提示。

内部通过onHover属性实现，如自己配置了onHover属性，该属性将会无效。

tipFormatter: value => void

开启tip配置下，可通过该属性格式化tip展示的内容。

取值优先级：tipFormatter => itemFormatter => value

reactive: Boolean

设置是否开启鼠标 hover 图表元素时，图例对应项的高亮效果。默认为 false，即不开启动画。

isSegment: Boolean

针对连续的颜色图例，设置图例样式是否为分块颜色模式，默认为 false，即非分块颜色模式，为渐变颜色模式。

sizeType: String

针对连续的大小图例，设置图例是否是针对节点大小映射的样式。可选 'circle' | 'normal' | null, 默认为 null，即针对除节点以外的其他元素的大小映射。
当 sizeType 为 'circle' 时的样式：

当 sizeType 为 'normal' 或 null 时的样式：

custom: Boolean

默认为 false，当 custom 为 true，表示不使用默认生成的图例，允许用户自定义非 HTML 版本的分类类型图例，包括具体的图例项以及 click、hover 交互。

自定义图例时需要用户自己声明具体的图例项 items (该属性是一个对象数组，数组中每一项为一个对象类型，结构为： { value: '', marker: { fill: 'red' } }以及图例项的 hover 和 click 事件。

具体使用如下：

// 自定义图例
config.legend = {
  custom: true,
  items: [
    {
      value: 'waiting', // 图例项的文本内容
      marker: {
        symbol: 'circle', // 该图例项 marker 的形状，参见 marker 参数的说明
        fill: '#3182bd', // 该图例项 marker 的填充颜色
      },
    },
    {
      value: 'call',
      marker: {
        symbol: 'square', // 该图例项 marker 的形状，参见 marker 参数的说明
        fill: '#99d8c9', // 该图例项 marker 的填充颜色
      },
    },
    {
      value: 'people',
      fill: '#fdae6b',
      marker: {
        symbol: 'line', // 该图例项 marker 的形状，参见 marker 参数的说明
        stroke: '#fdae6b', // 该图例项 marker 的填充颜色
        radius: 6,
      },
    },
  ],
  onHover: ev => {}, // 自定义 hover 事件
  onClick: ev => {}, // 自定义 click 事件
}