图表:饼图上有外部和内部标签

问题描述 投票:0回答:2

我正在 Recharts 库的帮助下创建饼图。该饼图显示了各种收入来源的分布情况。目前我只在名称外面显示一个标签(img 1,代码可以在链接代码沙箱中看到)。

但是,我还想在每个饼图的中心都有一个百分比数字。 (在 img 2 处绘制期望结果的示例)。我如何通过重新图表来实现这一目标?

代码沙箱示例

As it is now

enter image description here

reactjs charts recharts
2个回答
1
投票

这是代码希望有帮助。它是用

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 Chart


1
投票

我找到了两种可能的解决方案,都通过在 Pie 标签内添加 LabelList 来实现:

  1. 直接将每一项的百分比放入数据中,然后在LabelList的dataKey中引用这个百分比。
  2. 创建一个箭头函数,用于计算相对于值和总计的百分比,我们将其作为第二个参数,将计算百分比。
  • 使用 toFixed 函数,我们四舍五入到小数点后两位
  • 通过替换功能,我们将点替换为逗号来显示它。

在CSS中,我们添加以下类来更改百分比的类型和字体大小:

.label-percentage {
   font-family: arial;
   font-size: 20px;
}

代码沙箱解决方案

照片中解决方案的结果 enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.