legendFilter

概述

legendFilter 是一种交互功能，允许用户通过点击图例项来过滤图表中显示的数据。筛选功能支持两种类型的图例：

• 分类图例：用于离散数据的筛选
• 连续图例：用于连续数据的筛选

通过图例筛选，用户可以动态控制图表中显示的数据项，增强数据探索和分析能力。

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'view',
  data: temperatures,
  encode: { x: 'month', y: 'temperature', color: 'city' },
  interaction: { legendFilter: true },
  children: [
    { type: 'line' },
    { type: 'point' },
  ],
});

chart.render();

使用方式

图例筛选功能会在使用图例时默认开启。

({
  type: 'interval',
  legend: {
    color: {},
    size: {},
  },
});

也可以在 interaction 中手动设置是否开启：

({
  type: 'interval',
  legend: {
    color: {},
    size: {},
  },
  interaction: {
    legendFilter: true, // 启用图例筛选交互
  },
});

配置层级

图例筛选交互可以配置在 View 层级：

chart.options({
  type: 'view',
  interaction: { legendFilter: true },
});

配置项

当前版本的 LegendFilter 插件无可配置参数，调用时仅需指定 type：

复杂类型说明

LegendFilter 插件内部根据图例类型自动判断是否为类目图例或连续图例，进行不同的处理：

• 类目图例（className = legend-category）：点击行为绑定筛选，支持多选、取消、重置。
• 连续图例（className = legend-continuous）：绑定 valuechange 事件监听滑块变化。

插件内部通过图例元素中注入的数据和结构信息来自动识别这些信息，用户无需手动指定。

legend 组件配置

具体文档看图例 legend

事件

获得数据

• legend:filter - 当用户通过图例进行筛选时触发
• legend:reset - 当所有图例项都被选中时触发（重置状态）
• legend:focus - 当图例被聚焦时触发

chart.on('legend:filter', (e) => {
  const { nativeEvent, data } = e;
  if (!nativeEvent) return;
  console.log(data);
});

chart.on('legend:reset', (e) => {
  const { nativeEvent } = e;
  if (!nativeEvent) return;
  console.log('end');
});

chart.on('legend:focus', (e) => {
  const { nativeEvent, data } = e;
  if (!nativeEvent) return;
  console.log(data);
});

触发交互

• legend:filter - 触发图例筛选
• legend:focus - 触发图例聚焦
• legend:reset - 重置筛选状态

chart.emit('legend:filter', {
  data: { channel: 'color', values: ['Sports', 'Strategy'] },
});

chart.emit('legend:focus', {
  data: { channel: 'color', value: 'Sports' },
});

chart.emit('legend:reset', {});

示例

下面展示了一个离散型数据的 legendfilter 交互功能。

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'line',
  autoFit: true,
  height: 300,
  data: {
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/temperatures1.json',
  },
  encode: {
    x: (d) => new Date(d.date),
    y: 'value',
    color: 'condition',
  },
});

chart.render();