我正在 Recharts 库的帮助下创建饼图。该饼图显示了各种收入来源的分布情况。目前我只在名称外面显示一个标签(img 1,代码可以在链接代码沙箱中看到)。
但是,我还想在每个饼图的中心都有一个百分比数字。 (在 img 2 处绘制期望结果的示例)。我如何通过重新图表来实现这一目标?
这是代码希望有帮助。它是用
LabelList
制作的
<PieChart width={350} height={380}>
<Pie
dataKey="volume"
isAnimationActive={true}
data={currentPieValue()}
outerRadius={80}
fill="#08B8A1"
label
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
>
<LabelList dataKey="name" position="right" style={{ fontSize: "10px" }} />
{currentPieValue().map((entry, index) => (
<Cell key={`cell-${index}`} fill={colors[index]} />
))}
</Pie>
<Tooltip />
</PieChart>
我找到了两种可能的解决方案,都通过在 Pie 标签内添加 LabelList 来实现:
在CSS中,我们添加以下类来更改百分比的类型和字体大小:
.label-percentage {
font-family: arial;
font-size: 20px;
}