antvis / G2

📊 The concise and progressive visualization grammar.
https://g2.antv.antgroup.com
MIT License
12.13k stars 1.59k forks source link

柱状统计图的x轴部分名称显示不出来 #6373

Open YaoLilin opened 3 months ago

YaoLilin commented 3 months ago

同一个统计图原本显示正常,更新统计图的数据从多边少时,比如原本有3个统计数据,变为2个数据时,x轴的名称会不见

image

使用的是react的组件

pearmini commented 3 months ago

提供一下复现 demo 和更加详细的描述。

YaoLilin commented 3 months ago

版本:"@ant-design/charts": "^2.1.1" 代码如下,点击“更改数据”文本就能发现问题

image
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;