[英]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;
使用此代码,饼图标签将“值”键显示为百分比,而不是它所占用的图表部分的实际百分比。
假设 type:'a' 的值为 40。因此在饼图中它显示 40% 而不是它与其他相比的实际百分比。 我怎样才能做到这一点? 我被困在这几个小时
您可以将 label 内容从百分比更改为值
label: {
type: 'inner',
offset: '-30%',
content: function content(_ref) {
return ''.concat(_ref.value, '%');
},
style: {
fontSize: 14,
textAlign: 'center',
},
}
完整代码
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.