gpt4 book ai didi

reactjs - Rechart - 向图表添加标签

转载 作者:行者123 更新时间:2023-12-03 13:19:09 27 4
gpt4 key购买 nike

我正在尝试学习如何使用 Rechart。该文档说您可以在图表元素上放置标签,并给出了如何使用“名称”作为标签数据键来执行此操作的示例。

我尝试在图表中执行此操作,但没有成功。

如果我从字段中删除“标签”,则不会出现标签。如果我保留它,那么显示的唯一标签就是饼图楔形上的值。

我有一个数据键为“name”的标签(根据文档),但它没有在图表上呈现。

import React, { PureComponent } from 'react';
import {
ResponsiveContainer, PieChart, Pie, Legend, Label, LabelList
} from 'recharts';

const data = [
{ name: 'Group A', value: 400 }, { name: 'Group B', value: 300 },
{ name: 'Group C', value: 300 }, { name: 'Group D', value: 200 },
];

export default class Example extends PureComponent {
static jsfiddleUrl = '//jsfiddle.net/alidingling/6okmehja/';

render() {
return (
<div style={{ width: '100%', height: 300 }}>
<ResponsiveContainer>
<PieChart>
<Pie dataKey="value"
data={data}
fill="#8884d8"
Label dataKey="name"
/>
</PieChart>
</ResponsiveContainer>
</div>
);
}
}

如何向饼图添加标签?

最佳答案

对于其他寻找答案的人来说,这有效:

定义一个函数来按照您想要的方式呈现标签,例如:

let renderLabel = function(entry) {
return entry.name;
}

将 label 属性设置为指向您的函数:

<Pie label={renderLabel} [ you other properties ]>
[ your content ]
</Pie>

关于reactjs - Rechart - 向图表添加标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56104004/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com