自定义每个栏的Rechart条形图标签和颜色

Question

我有一个Rechart条形图，我想拥有这样的标签...

我希望颜色像这样...

问题是我似乎不能同时获得它们。第二张图像是我可以获得的最接近的图像，但它带来了值，而不是名称，因此int（85）而不是字符串（85％），也不是角度。

这是我的代码。我评论了允许倾斜标签的部分，因为它在那里时无法正常工作。.TSX

import { BarChart, Bar, LabelList, Cell } from "recharts";
import { colors } from "../../Colors/colors";

const data = [
  {
    name: `${85}%`,
    uv: 85,
  },
  {
    name: `${95}%`,
    uv: 95,
  },
  {
    name: `${80}%`,
    uv: 80,
  },
];
export default function MyBarChart(): JSX.Element {
  return (
    <BarChart width={150} height={400} data={data}>
      <Bar
        dataKey="uv"
        fill={colors.blueTheme[0]}
        radius={8}
        label={{ position: "insideBottom", fill: "black" }}
        name="name"
      >
        {/* <LabelList
          dataKey="name"
          position="insideBottom"
          angle={270}
          offset={25}
        /> */}
        {colors.blueTheme.map((entry, index) => (
          <Cell key={`cell-${index}`} fill={colors.blueTheme[index % 20]} />
        ))}
      </Bar>
    </BarChart>
  );
}

如何

export const colors = {
  blueTheme: ["#85A5FF", "#ADC6FF", "#D6E4FF"],
};

同时获得具有颜色差异的角度标签？

Answer 1

我发现了...

<BarChart width={150} height={400} data={data}>
  <Bar dataKey="uv" radius={8}>
    <LabelList
      dataKey="name"
      position="insideBottom"
      angle={270}
      offset={25}
      fill="black"
    />
    {colors.blueTheme.map((entry, index) => (
      <Cell key={`cell-${index}`} fill={colors.blueTheme[index % 20]} />
    ))}
  </Bar>
</BarChart>

Answer 2

如果您更新数据并添加每个条形所需的颜色，则如下：

  const data = [
  {
    name: `${85}%`,
    uv: 85,
    color: "#85A5FF" // you may pass a value directly as string
  },
  {
    name: `${95}%`,
    uv: 95,
    color: colors.blueTheme[1]  // or colors.blueTheme by index
  },
  {
    name: `${80}%`,
    uv: 80,
    color: colors.blueTheme[getIndex()]  // or some custom logic to evaluate index
  },
];

您可以按以下方式更新代码，它将起作用：

export default function MyBarChart(): JSX.Element {
  return (
    <BarChart width={300} height={400} data={data}>
    <Bar
      dataKey="uv"
      fill="#85A5FF"
      radius={8}
      label={{
        position: "insideBottom",
        angle: -60,
        fill: "black",
        offset: 25
      }}
    >
      <LabelList dataKey="name" />
      {data.map((entry, index) => (
        <Cell fill={entry.color} key={`cell-${index}`} />
      ))}
    </Bar>
  </BarChart>
  );
}

工作示例：