Ant Design Charts 实现柱状图点击事件与表格联动

发布时间：2026-01-07 17:16

在数据可视化应用中，经常需要实现图表元素与表格数据的联动交互。Ant Design Charts作为Ant Design生态中的可视化组件库，提供了丰富的交互事件处理能力。

柱状图点击事件基础实现

Ant Design Charts通过onReady回调函数暴露了底层图表实例，开发者可以利用这个实例来监听各种交互事件。对于柱状图（interval图形元素）的点击事件，可以通过以下方式实现：

const config = { onReady: ({ chart }) => { chart.on('interval:click', (ev) => { // 处理点击事件的逻辑 console.log('柱状图元素被点击', ev); }); } };

事件对象详解

当柱状图的某个柱子被点击时，事件对象ev包含以下重要信息：

data - 被点击柱子对应的数据项 geometry - 被点击的图形元素 shape - 具体的形状信息 x/y - 点击位置的坐标

实现表格联动

基于点击事件，我们可以很容易地实现点击柱状图后显示对应数据的表格：

import { useState } from 'react'; import { Column } from '@ant-design/charts'; import { Table } from 'antd'; const Demo = () => { const [tableData, setTableData] = useState([]); const config = { data: [...], // 你的图表数据 xField: 'category', yField: 'value', onReady: ({ chart }) => { chart.on('interval:click', (ev) => { // 根据点击的数据项设置表格数据 setTableData([ev.data]); }); } }; return ( <div> <Column {...config} /> <Table columns={[...]} // 你的表格列配置 dataSource={tableData} /> </div> ); };