Antd饼图在显示数据时,如果存在重复的键值,会出现只显示一个值并忽略其他值的问题。以下是解决这个问题的示例代码:
import React from 'react';
import { render } from 'react-dom';
import { Chart, Geom, Tooltip, Coord, Legend, Label } from 'bizcharts';
import DataSet from '@antv/data-set';
class PieChart extends React.Component {
render() {
const { DataView } = DataSet;
const { data } = this.props;
const dv = new DataView();
dv.source(data).transform({
type: 'percent',
field: 'value',
dimension: 'key',
as: 'percent',
});
const cols = {
percent: {
formatter: val => {
val = val * 100 + '%';
return val;
},
},
};
return (
{
percent = percent * 100 + '%';
return {
name: key,
value: percent,
};
},
]}
style={{ lineWidth: 1, stroke: '#fff' }}
>
);
}
}
export default PieChart;
在这个示例代码中,我们使用了DataSet库将数据转换为数据视图,并指定了“dimension: 'key'”字段,以确保每个键值都能正确显示。同时,我们还将“