Ant Design Charts 中 onReady 事件未触发的解决方案

问题背景

在使用 Ant Design Charts 进行数据可视化开发时，开发者经常会遇到需要监听图表初始化完成事件的需求。Ant Design Charts 提供了 onReady 回调函数，理论上应该在图表渲染完成后触发。然而，在实际开发中，可能会遇到 onReady 事件不触发或者触发时机不符合预期的情况。

核心问题分析

从开发者提供的代码来看，主要存在以下几个关键点：

1. 图表配置中定义了 onReady 回调函数
2. 使用了 brushXFilter 交互功能
3. 图表数据通过异步请求获取并更新

问题原因

经过分析，onReady 事件只在图表初次渲染时触发一次。当数据通过异步请求更新后，图表会重新渲染，但此时 onReady 不会再次触发。这是预期的行为，因为 onReady 设计初衷就是用于监听图表初始化的完成事件。

解决方案

方案一：使用 React ref 保存图表实例

const chartRef = React.useRef<Plot>();

const config = {
  // ...其他配置
  onReady: (plot) => {
    chartRef.current = plot;
    console.log('图表初始化完成');
  }
};

// 之后可以通过 chartRef.current 访问图表实例

方案二：监听数据变化

如果需要监听数据更新后的图表状态，可以使用 React 的 useEffect 钩子：

React.useEffect(() => {
  if (data.length > 0) {
    console.log('数据已加载，图表已更新');
    // 这里可以执行需要的操作
  }
}, [data]);

方案三：使用其他交互事件

对于 brushXFilter 交互功能，可以使用专门的事件监听：

const config = {
  // ...其他配置
  interactions: [
    {
      type: 'brush-x-filter',
      cfg: {
        onStart: (e) => {
          console.log('开始过滤', e);
        },
        onEnd: (e) => {
          console.log('结束过滤', e);
        }
      }
    }
  ]
};

最佳实践建议

1. 明确需求：区分是需要监听图表初始化完成，还是数据更新后的状态变化
2. 合理使用 ref：对于需要频繁操作的图表实例，使用 ref 保存是推荐做法
3. 事件选择：根据具体交互需求选择合适的事件监听方式
4. 性能考虑：避免在回调函数中执行过多复杂操作，以免影响图表性能

总结

Ant Design Charts 的 onReady 事件设计用于监听图表初始化完成，而不是数据更新。理解这一设计理念后，开发者可以根据实际需求选择合适的解决方案。对于交互操作，建议使用专门的事件监听机制，而不是依赖 onReady 事件。通过合理使用 React 的 ref 和状态管理，可以更好地控制图表的行为和状态。