重新图表:在饼图上有内外标签
重新图表:在饼图上有内外标签
提问于 2022-05-12 11:36:05
在重新图表库的帮助下，我正在创建一个饼图。这张馅饼图显示了各种收入来源的分布情况。目前，我只在名称的外部显示一个标签(img 1，代码可以在链接代码沙箱中看到)。
然而，我也希望在每一块馅饼的中间有一个百分比的数字。(在img 2中绘制期望结果的示例)。我如何通过重新绘制图表来实现这一点？
回答 2
Stack Overflow用户
发布于 2022-07-26 22:07:52
我找到了两种可能的解决方案，两种方法都是在Pie标记中添加LabelList：
- 将每个百分比直接放在数据中，然后在LabelList的LabelList中引用这个百分比。
- 创建一个箭头函数，在该函数中，计算相对于值的百分比，而作为第二个参数的总数将计算百分比。
- 使用toFixed函数，我们将两个小数点相加。
- 使用替换函数，我们交换逗号来显示它的点。
在css中，我们添加以下类以更改百分比的类型和字体大小：
.label-percentage {
font-family: arial;
font-size: 20px;
}溶液在照片中的结果
Stack Overflow用户
发布于 2022-12-01 06:42:15
下面是代码希望借助在这里输入图像描述帮助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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72214818
复制相关文章
相似问题
腾讯云开发者
