recharts在MultiBarChart中沿Y轴的每个条形上添加关闭按钮，以便关闭条形

import React, { useState } from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

const data = [
  { name: 'A', value: 10 },
  { name: 'B', value: 20 },
  { name: 'C', value: 30 },
];

const CustomBar = ({ x, y, width, height, fill, onClick }) => {
  return (
    <g>
      <rect x={x} y={y} width={width} height={height} fill={fill} />
      <text x={x + width / 2} y={y + height / 2} fill="#fff" textAnchor="middle" dominantBaseline="middle">
        {`${height}`}
      </text>
      <circle cx={x + width - 10} cy={y + 10} r={8} fill="#f00" onClick={onClick} />
    </g>
  );
};

const MultiBarChart = () => {
  const [barStatus, setBarStatus] = useState(Array(data.length).fill(true));

  const handleBarClick = (index) => {
    const newBarStatus = [...barStatus];
    newBarStatus[index] = !newBarStatus[index];
    setBarStatus(newBarStatus);
  };

  return (
    <BarChart width={500} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Bar dataKey="value" fill="#8884d8" shape={<CustomBar onClick={(e) => handleBarClick(e.index)} />} hide={barStatus} />
    </BarChart>
  );
};

export default MultiBarChart;