AntV G2 支持缩放、筛选、悬停提示等交互功能：一、通过 defaultInteractions 或 chart.interaction 启用 tooltip、legend-filter 等基础交互；二、配置 sliderFilter 实现数据范围筛选；三、定制 tooltip 提示内容与字段；四、启用 legend-filter 进行图例筛选；五、使用 annotation 添加文本标注增强表达。
如果您希望在网页中实现具备缩放、筛选、悬停提示等能力的动态图表，AntV G2 提供了原生支持的交互机制。以下是构建交互式可视化图表的具体操作路径：
一、启用基础交互组件
G2 默认内置多种交互行为，如 tooltip（悬停提示）、legend-filter（图例筛选）、element-active（元素高亮）等，无需额外安装即可直接启用。
1、在初始化 Chart 实例时，通过 defaultInteractions 配置项传入字符串数组，例如：defaultInteractions: ['tooltip', 'legend-filter']。
2、若需单独启用某项交互，可在图表绘制完成后调用 chart.interaction('interaction-name') 方法，例如：chart.interaction('continuous-filter')。
3、禁用默认交互可在创建 chart 时设置 defaultInteractions: []，再按需手动添加。
二、配置 sliderFilter 实现数据范围筛选
sliderFilter 允许用户通过拖拽缩略轴手柄或选区，动态调整图表显示的数据区间，适用于时间序列或数值型坐标轴场景。
1、在图表配置对象中直接启用 x 或 y 方向的 slider 组件：slider: { x: true }，G2 将自动绑定缩略轴与主坐标轴并启用筛选逻辑。
2、在 interaction 配置中显式声明：interaction: { sliderFilter: true }，此时将采用默认参数（如缩略轴高度为 40px、手柄尺寸为 12px）。
3、若需自定义缩略轴样式，可在 slider 配置中嵌套详细参数：slider: { x: { height: 30, handlerSize: 10, backgroundStyle: { fill: '#f0f0f0' } } }。
三、绑定 tooltip 实现悬停数据提示
tooltip 用于在鼠标悬停于图形元素上时，显示对应数据点的详细信息，提升图表可读性与探索性。
1、启用默认 tooltip 交互只需在 chart 初始化时设置 tooltip: {} 或 tooltip: { showMarkers: true }。
2、自定义提示内容需调用 chart.tooltip({ custom: true })，然后监听 tooltip:change 事件，动态生成 HTML 内容并注入到 tooltip DOM 节点中。
3、隐藏特定字段的提示可通过 tooltip: { fields: ['x', 'y'] } 显式限定显示字段列表。
四、使用 legend-filter 实现图例交互筛选
当图表包含多类别数据（如按类型着色的柱状图），图例可作为筛选控件，点击图例项可隐藏/显示对应数据系列。
1、确保图例已启用：在 chart 初始化时设置 legend: { position: 'top' } 或调用 chart.legend(true)。
2、启用图例筛选交互：chart.interaction('legend-filter')，此时点击图例项将触发数据过滤。
3、若需限制仅允许单选，可在 interaction 配置中传入选项：chart.interaction('legend-filter', { allowAllCanceled: false })。
五、添加 annotation 文本标注增强图表表达力
annotation 可在图表任意位置插入文本、标记线、区域框等辅助元素，用于突出关键数据点或说明趋势特征。
1、调用 chart.annotation().text() 插入静态文本，需指定 position 参数（如 ['Sports', 275]）和 content 字符串。
2、为每个数据点批量添加标注，可遍历 data 数组，在循环体内调用 chart.annotation().text() 并传入对应 position 和 content。
3、调整标注偏移量以避免遮挡图形，使用 offsetY: -20 或 offsetX: 10 控制相对位置。
