是否可以避免 Pie recharts js 中的标签重叠？

Question

I used the Pie component from Recharts js and the problem is that I get labels overlapping for labels with the same value. here is some of my code:

<PieChart>
       <Pie dataKey="value"
       data={data}
       fill="#536A6D"
       label nameKey="name"
       >
      <LabelList dataKey="name" position="insideStart" />
      <Pie>
</PieChart>

是否可以排列标签以使它们不会相互碰撞？
先感谢您！

Answer 1

是的，您必须有条件地渲染标签线和标签属性。就我而言，只有零值重叠，因此当值为零时，我不会渲染该值。在线的其他示例将有助于自定义标签，但剩下的小标签行没有任何内容，我遇到了这个问题，不得不深入研究源代码以得出自定义代码/：

<Pie
 data={dataZ}
 cx={150 + wid - pad / 2}
 cy={150}
 innerRadius={70 + scaler}
 outerRadius={100 + scaler}
 fill="#8884d8"
 paddingAngle={1}
 dataKey="value"
 label={RenderLabel2}
 labelLine={RenderCustomizedLabelLine}
>




let RenderCustomizedLabelLine = function (props: any) {
    return (props.value != 0 ? <path stroke={props.stroke} d={`M${props.points[0].x},${props.points[0].y}L${props.points[1].x},${props.points[1].y}`} className="customized-label-line" /> : <polyline stroke={props.stroke} fill="none" />)    
  }

let RenderLabel2 = function (props: any) {
    const RADIAN = Math.PI / 180;
    const radius = 25 + props.innerRadius + (props.outerRadius - props.innerRadius);
    const x = props.cx + radius * Math.cos(-props.midAngle * RADIAN);
    const y = props.cy + radius * Math.sin(-props.midAngle * RADIAN);


    return (props.value != 0 ? <text
        className="recharts-text recharts-pie-label-text"
        x={x}
        y={y}
        fontSize='16'
        fontFamily='sans-serif'
        dominantBaseline="central"
        cy={props.cy}
        cx={props.cx}
        fill="#666"
        textAnchor={props.x > props.cx ? 'start' : 'end'}
    >{Number.isInteger(props.value) ? Number(props.value) : Number(props.value).toFixed(1)}%</text> : <g>
    <text x={500} y={y} fill="#transparent" rotate="90"></text>
   </g>)

}