G2Plot 图例交互控制实践记录

在实际的数据可视化项目中，图表的交互行为往往会直接影响用户体验。尤其是在后台系统、监控面板或只读型数据展示页面中， 图例的点击交互 有时并不是一个加分项，反而可能造成误解或数据状态混乱。

本文基于一次完整的前端实践过程，记录在 @antv/g2plot 2.4.33 版本中，如何精确控制并关闭图例的点击交互行为，同时保持图表的正常展示能力。

一、问题背景

在 G2Plot 中，图例（Legend）默认是带交互能力的：

• 点击图例项会 过滤数据 （legend-filter）
• 鼠标悬停或点击会触发 高亮/激活状态 （legend-active）

这些行为在分析型图表中非常常见，但在以下场景中并不适用：

• 数据只读展示
• 报表型页面（避免误操作）
• 与其他业务状态强绑定的图表
• 图例仅作为说明用途

因此，目标非常明确：

保留图例显示，但禁止一切图例点击交互行为

二、常见误区

在实际排查过程中，最容易踩的坑是：

legend: {
  selected: false,
}

这一配置在 G2Plot 2.x 中 并不会生效 ，因为：

• 图例的交互并不由 legend 配置本身控制
• 图例交互属于 G2 内置交互系统（Interaction）

这意味着，如果只从 legend 配置层面入手，是无法真正禁用点击行为的。

三、G2Plot 的交互机制简述

G2Plot 底层基于 G2，其交互系统是以 interactions 为核心设计的。

图例相关的内置交互主要有两个：

• legend-filter ：点击图例后过滤对应数据
• legend-active ：图例项与图形元素的高亮联动

只要这两个交互存在，图例就一定是 可点击的 。

四、关闭图例点击交互的正确方式

1. 精确关闭图例相关交互

通过在图表配置中显式禁用这两个交互，即可实现 只读图例 ：

interactions: [
  { type: 'legend-filter', enable: false },
  { type: 'legend-active', enable: false },
]

此时：

• 图例仍然正常渲染
• 点击图例不会过滤数据
• 不会触发任何高亮或状态变化

2. 完整示例

import { Pie } from '@antv/g2plot';

const plot = new Pie('container', {
  data,
  angleField: 'value',
  colorField: 'type',

  interactions: [
    { type: 'legend-filter', enable: false },
    { type: 'legend-active', enable: false },
  ],

  legend: {
    flipPage: false,
  },
});

plot.render();

该配置在 @antv/g2plot@2.4.33 环境下行为稳定、可复现。

五、完全禁用交互的方式

在某些页面中，图表不需要任何形式的交互能力，可以直接移除所有内置交互：

interactions: []

此时包括：

• 图例过滤
• 图例高亮
• 元素激活
• 元素高亮

都会被一并移除，图表退化为纯展示组件。

六、不显示图例的场景

如果业务本身不需要图例，可以直接关闭：

legend: false

这与 禁用图例交互 属于两个完全不同的层级控制点。

七、总结

在 G2Plot 2.x 中：

• 图例点击行为不是 legend 配置的一部分
• 图例交互完全由 interactions 系统控制
• 禁用图例点击的本质，是禁用 legend-filter 与 legend-active

理解这一点之后，图表交互行为就可以被精确地纳入整体系统设计中，而不会成为不可控的副作用。

这也是在中大型前端项目中，对第三方可视化库进行 工程化驯化 的一个典型案例。