Open YaoLilin opened 3 months ago
提供一下复现 demo 和更加详细的描述。
版本:"@ant-design/charts": "^2.1.1" 代码如下,点击“更改数据”文本就能发现问题
import {Column} from "@ant-design/charts";
import {useState} from "react";
const data1 = [
{xname:'2024-01', value: 10},
{xname:'2024-02', value: 10},
{xname:'2024-03', value: 10}
]
const data2 = [
{xname:'2024-01', value: 10},
{xname:'2024-03', value: 10}
]
const ChartDebug = () => {
const [state, setState] = useState(true);
const chartData = state ? data1 : data2;
const config = {
data:chartData,
xField: 'xname',
yField: 'value',
colorField:'xname',
style:{
radiusTopLeft: 8,
radiusTopRight: 8,
maxWidth: 30
},
};
return (
<div style={{height: 300}}>
<div onClick={()=>{
setState(!state);
}}>更改数据</div>
<Column {...config} />
</div>
)
}
export default ChartDebug;
同一个统计图原本显示正常,更新统计图的数据从多边少时,比如原本有3个统计数据,变为2个数据时,x轴的名称会不见
使用的是react的组件