如何在recharts柱状图中点击Bar时获取对应绑定的数据对象

直接利用<Bar>组件内置的点击事件回调即可实现，不需要额外引入第三方依赖，具体实现如下：

完整可运行代码示例 #

import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';

// 业务侧传入的图表数据
const chartData = [
  {
    "AppName": "abc",
    "count": 1
  },
  {
    "AppName": "abc1",
    "count": 2
  },
  {
    "AppName": "abc2",
    "count": 3
  }
];

const AppBarChart = () => {
  // 柱条点击处理逻辑
  const handleBarClick = (barData) => {
    // barData.payload 对应当前点击柱条关联的原始数据对象
    const currentAppName = barData.payload.AppName;
    // 后续自定义业务逻辑可写在此处，比如状态存储、弹窗提示、页面跳转等
    console.log('当前点击柱条对应的AppName：', currentAppName);
  };

  return (
    <div style={{ width: '100%', height: 400 }}>
      <ResponsiveContainer width="100%" height="100%">
        <BarChart data={chartData}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="AppName" />
          <YAxis />
          <Tooltip />
          {/* 给Bar组件绑定点击事件即可 */}
          <Bar 
            dataKey="count" 
            fill="#8884d8" 
            onClick={handleBarClick}
          />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
};

export default AppBarChart;

实现关键点 #

• 点击事件直接绑定在<Bar>组件上即可，不需要手动遍历柱条单独绑定，Recharts内部已经做了事件代理
• 点击回调的入参对象中，payload字段就是传入图表数组里对应的原始数据项，除了AppName之外，也可以从该字段取到count等其他自定义存储的属性
• 如果需要实现点击选中高亮效果，可以给<Bar>增加activeBar属性自定义选中柱的填充色、边框样式，配合React state存储当前选中的AppName即可完成交互

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