ag-grid 26集成图表ChartRangeSelectionChanged事件拖拽导航器/图例不触发问题

数据老陈

2026-10-3

问题根因

ag-grid 26.0.0 企业版存在已知版本缺陷，onChartRangeSelectionChanged绑定的ChartRangeSelectionChanged事件仅会响应图表菜单Data标签页的配置修改操作，未对导航器拖拽、图例勾选两类操作做事件派发，与官方文档描述的触发场景不符。

修复方案

方案1：升级ag-grid企业版到26.2.0及以上版本。官方在26.2.0版本的补丁中修复了该事件的派发逻辑，拖拽导航器范围选择手柄时可以正常触发ChartRangeSelectionChanged事件。
方案2：如果必须保留26.0.0版本，可通过监听底层图表实例的原生事件做兼容处理：
1. 先通过onChartCreated回调拿到ag-charts原生实例
2. 给原生实例绑定rangeSelectionChange事件，自行构造符合业务需要的事件参数即可，示例代码如下：

// 绑定图表创建回调
const gridOptions = {
  // 其他grid配置保留
  onChartCreated: (event) => {
    const chartInstance = event.chart.chartInstance;
    // 监听导航器范围变更事件
    chartInstance.addEventListener('rangeSelectionChange', (rangeEvent) => {
      // 此处可根据需要构造和官方ChartRangeSelectionChanged一致的参数结构
      console.log('范围选择变更', {
        chartId: event.chartId,
        range: rangeEvent.range
      });
    });
  },
  onChartRangeSelectionChanged: (event) => {
    // 原有Data标签页修改的事件逻辑保留即可
    console.log('Changed range selection of chart with ID ' + event.chartId, event);
  }
}