[英]Pie Chart in Ant Design Charts don't have option to show label by percentage . How can i do it manually?
const DemoPie: React.FC = () => {
var data = [
{
type: 'a',
value: 40,
},
{
type: 'b',
value: 25,
},
{
type: 'c',
value: 190,
},
{
type: 'd',
value: 15,
},
{
type: 'e',
value: 10,
},
{
type: 'f',
value: 50,
},
];
var config = {
appendPadding: 10,
data: data,
angleField: 'value',
colorField: 'type',
radius: 0.9,
label: {
type: 'inner',
offset: '-30%',
content: function content(_ref) {
var percent = _ref.percent;
return ''.concat(percent * 100, '%');
},
style: {
fontSize: 14,
textAlign: 'center',
},
},
interactions: [{ type: 'element-active' }],
};
return <Pie {...config} />;
};
export default DemoPie;
With this code the pie labels are showing the 'value' key as the percentage but not the actual %age of the part of the chart it takes.使用此代码,饼图标签将“值”键显示为百分比,而不是它所占用的图表部分的实际百分比。
Suppose for type:'a' the value is 40. So in pie chart its showing 40% and not the actual percentage it takes as compared to others.假设 type:'a' 的值为 40。因此在饼图中它显示 40% 而不是它与其他相比的实际百分比。 How can i achieve this?
我怎样才能做到这一点? I am stuck at this for hours
我被困在这几个小时
You may change the label content from percentage to value您可以将 label 内容从百分比更改为值
label: {
type: 'inner',
offset: '-30%',
content: function content(_ref) {
return ''.concat(_ref.value, '%');
},
style: {
fontSize: 14,
textAlign: 'center',
},
}
Full code完整代码
const DemoPie: React.FC = () => {
var data = [
{
type: 'a',
value: 40,
},
{
type: 'b',
value: 25,
},
{
type: 'c',
value: 190,
},
{
type: 'd',
value: 15,
},
{
type: 'e',
value: 10,
},
{
type: 'f',
value: 50,
},
];
var config = {
appendPadding: 10,
data: data,
angleField: 'value',
colorField: 'type',
radius: 0.9,
label: {
type: 'inner',
offset: '-30%',
content: function content(_ref) {
return ''.concat(_ref.value, '%');
},
style: {
fontSize: 14,
textAlign: 'center',
},
},
interactions: [{ type: 'element-active' }],
};
return <Pie {...config} />;
};
export default DemoPie;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.