如何在MUI X BarChart中添加点击图表获取数据的功能？

要实现点击柱状图柱子时获取对应数据并打印到控制台，核心是利用MUI X BarChart提供的onItemClick回调属性，直接获取点击项的原始数据。

完整实现代码示例 #

import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from '@mui/x-charts';

// 示例数据（可替换为你的业务数据）
const chartData = [
  { name: '类别1', value: 120 },
  { name: '类别2', value: 250 },
  { name: '类别3', value: 180 },
  { name: '类别4', value: 300 },
];

export default function ClickableBarChart() {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <BarChart
        data={chartData}
        // 点击柱子时触发的回调
        onItemClick={(params) => {
          // params.payload 即为当前点击柱子对应的原始数据对象
          console.log('点击的柱子数据：', params.payload);
        }}
      >
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Bar dataKey="value" fill="#2196F3" />
      </BarChart>
    </ResponsiveContainer>
  );
}

关键说明 #

• onItemClick回调接收的params参数包含多个字段，其中payload是点击柱子对应的原始数据项，直接打印即可获取完整数据。
• 如果是多系列柱状图，params还会包含seriesIndex（系列索引）、dataIndex（数据项索引）等字段，可用于区分不同系列的点击事件。

内容的提问来源于stack exchange，提问作者QuangTran