Recharts中Label组件content属性失效问题求助

问题原因 #

你遇到的问题有两个核心原因：

1. Recharts Label组件的content属性要求：在Recharts 2.x版本中，content属性需要传入一个返回React元素的函数，而不是直接传入JSX元素。
2. SVG与HTML元素兼容问题：Recharts基于SVG渲染，SVG中无法直接渲染HTML元素（如div、h1），必须用<foreignObject>标签包裹HTML内容才能正常显示。

修复后的代码示例 #

自定义Label组件（修改后）

function CustomLabel(props: any) {
  // 利用Label传入的cx、cy（饼图中心坐标）来定位内容
  const { cx, cy } = props;
  return (
    // foreignObject用于在SVG中嵌入HTML元素，需设置合适的宽高和定位
    <foreignObject x={cx - 100} y={cy - 50} width={200} height={100}>
      <div>
        <h1 className="custom">Custom Label</h1>
        <p>Testing</p>
      </div>
    </foreignObject>
  );
}

饼图组件（修改后）

<PieChart>
  <Pie
    isAnimationActive={false}
    data={pieArray}
    innerRadius={100}
    outerRadius={150}
    dataKey="value"
    cy="50%"
    cx="50%"
    startAngle={90}
    endAngle={-270}
  >
    {pieArray.map(({ data }, id) => (
      <Cell key={data} fill={chartColors[id % 8]} />
    ))}
    {/* content改为返回CustomLabel的函数，并传入props */}
    <Label
      content={(props) => <CustomLabel {...props} />}
      position="center"
    />
  </Pie>
</PieChart>

关键说明 #

• 函数式的content会接收包含饼图中心坐标cx、cy的props，利用这些值可以精准定位自定义标签。
• <foreignObject>的x、y设置为cx - 宽度/2、cy - 高度/2，确保内容居中显示；width和height需要根据你的HTML内容大小调整。

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