工具提示仅显示Recharts中的第一个栏反应？

Question

我是对反应和攻击的新手，并想显示单个条的工具提示，但不幸的是，它显示了第一个栏的工具提示，而不是其他栏的工具提示。

这是我的代码

import React, { memo } from "react";
import {
  Bar,
  BarChart,
  CartesianGrid,
  LabelList,
  Rectangle,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";
import { makeStyles } from "@material-ui/core/styles";

import ChartWrapper from "../chartParent/chartWrapper/ChartWrapper";
import CustomTooltip from "../timeSeriesChart/CustomTooltip";
const Categories = [
  { category: "great", fill: "#00D063" },
  { category: "fair", fill: "#FFC135" },
  { category: "risky", fill: "#F44138" },
];
const useStyles = makeStyles((theme) => ({
  root: {
    margin: -30,
    width: 160,
    backgroundColor: "#fff",
    borderRadius: 5.5,
  },
  title: {
    fontFamily: "Open Sans Condensed",
    fontWeight: 600,
    fontSize: 18,
  },
  tooltipData: {
    width: "100%",
    height: 31,
    borderRadius: "5.5px 5.5px 0px 0px",
  },
  label: {
    color: "#fff",
    fontFamily: "Lato",
    fontWeight: 400,
    fontSize: 14,
    marginLeft: 18,
    paddingTop: "7px",
  },
  toolValue: {
    marginTop: 11,
    marginLeft: 18,
    fontFamily: "Roboto",
    fontWeight: 600,
    fontSize: 19,
  },
  signature: {
    fontWeight: 500,
    fontSize: 14,
    marginTop: -10,
    marginLeft: 18,
    paddingBottom: 11,
    paddingRight: 18,
    color: "#8D8D8D",
    fontFamily: "Lato",
  },
}));

const PerformanceBreakdownChart = ({ data, ...props }) => {
  const classes = useStyles();
  console.log("categories", data);

  return (
    <ChartWrapper {...props}>
      <ResponsiveContainer minHeight={150} width={"100%"} height="100%">
        <BarChart
          data={data}
          margin={{
            top: 30,
            right: 20,
            left: 20,
            bottom: 0,
          }}
          barSize={20}
        >
          <CartesianGrid horizontal={false} vertical={false} />
          <XAxis dataKey="week" axisLine={false} tickLine={false} />
          <YAxis hide={true} dy={4} />

          <Tooltip
            cursor={{ fill: "transparent" }}
            content={<CustomTooltip />}
          />
          {Categories.map(({ category, fill }) => (
            <Bar
              key={category}
              dataKey={category}
              fill={fill}
              isAnimationActive={false}
              shape={<Rectangle radius={[10, 10, 10, 10]} />}
              minPointSize={16}
            >
              <LabelList
                dataKey={category}
                position="insideBottomLeft"
                dy={11}
                offset="15"
                angle="-90"
                fill="#FFF"
              />
            </Bar>
          ))}
        </BarChart>
      </ResponsiveContainer>
    </ChartWrapper>
  );
};

export default memo(PerformanceBreakdownChart);

customTooltip.js

import React, { memo } from "react";
import { makeStyles } from "@material-ui/core/styles";
import { getCategory, getCategoryColor } from "../../../data/helpers/helpers";
import { useTranslation } from "react-i18next";
import { GREY } from "../../../pages/overviewPage/containers/DistanceTraveledParentContainer";

const useStyles = makeStyles((theme) => ({
  root: {
    margin: -30,
    width: 160,
    backgroundColor: "#fff",
    borderRadius: 5.5,
  },
  title: {
    fontFamily: "Open Sans Condensed",
    fontWeight: 600,
    fontSize: 18,
  },
  tooltipData: {
    width: "100%",
    height: 31,
    borderRadius: "5.5px 5.5px 0px 0px",
  },
  label: {
    color: "#fff",
    fontFamily: "Lato",
    fontWeight: 400,
    fontSize: 14,
    marginLeft: 18,
    paddingTop: "7px",
  },
  toolValue: {
    marginTop: 11,
    marginLeft: 18,
    fontFamily: "Roboto",
    fontWeight: 600,
    fontSize: 19,
  },
  signature: {
    fontWeight: 500,
    fontSize: 14,
    marginTop: -10,
    marginLeft: 18,
    paddingBottom: 11,
    paddingRight: 18,
    color: "#8D8D8D",
    fontFamily: "Lato",
  },
}));

const CustomTooltip = ({ active, payload, label, signature }) => {
  const { t } = useTranslation();
  const classes = useStyles();

  if (active && payload) {
    const color = signature ? GREY : getCategoryColor(payload[0].value);
    const customLabel = t(
      signature ? signature : getCategory(payload[0].value)
    );

    return (
      <div className={classes.root}>
        <div
          className={classes.tooltipData}
          style={{ backgroundColor: `${color}` }}
        >
          <p className={classes.label}>{`${label}`}</p>
        </div>
        <p className={classes.toolValue}>{payload[0].value}</p>
        <p className={classes.signature}>{customLabel}</p>
      </div>
    );
  }

  return null;
};

export default memo(CustomTooltip);

上述代码输出看起来像这样。 输出

我如何将单个条的工具显示为以下片段？ 实际所需工具提示