Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🐛 [BUG] 百分比条形图经过异步更新数据后,图表出现了坍缩。 #3829

Open
xiaopujun opened this issue Nov 20, 2024 · 0 comments
Labels
Bug Something isn't working

Comments

@xiaopujun
Copy link

image

问题描述:创建百分比条件图后,使用定时器异步更新他的数据,百分比条形图会出现坍缩,整个百分比图形缩成一条横杠

问题版本:2.4.5

复现方式:官网可复现

复现代码:复制下方代码粘贴到官方百分比条形图中即可复现

import { Bar } from '@antv/g2plot';

const data = [
  {
    country: 'Asia',
    year: '1750',
    value: 502,
  },
  {
    country: 'Asia',
    year: '1800',
    value: 635,
  },
  {
    country: 'Asia',
    year: '1850',
    value: 809,
  },
  {
    country: 'Asia',
    year: '1900',
    value: 947,
  },
  {
    country: 'Asia',
    year: '1950',
    value: 1402,
  },
  {
    country: 'Asia',
    year: '1999',
    value: 3634,
  },
  {
    country: 'Asia',
    year: '2050',
    value: 5268,
  },
  {
    country: 'Africa',
    year: '1750',
    value: 106,
  },
  {
    country: 'Africa',
    year: '1800',
    value: 107,
  },
  {
    country: 'Africa',
    year: '1850',
    value: 111,
  },
  {
    country: 'Africa',
    year: '1900',
    value: 133,
  },
  {
    country: 'Africa',
    year: '1950',
    value: 221,
  },
  {
    country: 'Africa',
    year: '1999',
    value: 767,
  },
  {
    country: 'Africa',
    year: '2050',
    value: 1766,
  },
  {
    country: 'Europe',
    year: '1750',
    value: 163,
  },
  {
    country: 'Europe',
    year: '1800',
    value: 203,
  },
  {
    country: 'Europe',
    year: '1850',
    value: 276,
  },
  {
    country: 'Europe',
    year: '1900',
    value: 408,
  },
  {
    country: 'Europe',
    year: '1950',
    value: 547,
  },
  {
    country: 'Europe',
    year: '1999',
    value: 729,
  },
  {
    country: 'Europe',
    year: '2050',
    value: 628,
  },
];

const barPlot = new Bar('container', {
  data,
  xField: 'value',
  yField: 'year',
  seriesField: 'country',
  isPercent: true,
  isStack: true,
  /** 自定义颜色 */
  // color: ['#2582a1', '#f88c24', '#c52125', '#87f4d0'],
  label: {
    position: 'middle',
    content: (item) => {
      return item.value.toFixed(2);
    },
    style: {
      fill: '#fff',
    },
  },
});

barPlot.render();
const timer = setTimeout(() => {
    barPlot.changeData([
        {
            country: 'Asia',
            year: '1750',
            value: 502,
        },
        {
            country: 'Asia',
            year: '1800',
            value: 635,
        },
        {
            country: 'Asia',
            year: '1850',
            value: 809,
        },
        {
            country: 'Asia',
            year: '1900',
            value: 947,
        },
        {
            country: 'Asia',
            year: '1950',
            value: 1402,
        },
        {
            country: 'Asia',
            year: '1999',
            value: 3634,
        },
        {
            country: 'Asia',
            year: '2050',
            value: 5268,
        },
        {
            country: 'Africa',
            year: '1750',
            value: 106,
        },
        {
            country: 'Africa',
            year: '1800',
            value: 107,
        },
        {
            country: 'Africa',
            year: '1850',
            value: 111,
        },
        {
            country: 'Africa',
            year: '1900',
            value: 133,
        },
        {
            country: 'Africa',
            year: '1950',
            value: 221,
        },
        {
            country: 'Africa',
            year: '1999',
            value: 767,
        },
        {
            country: 'Africa',
            year: '2050',
            value: 1766,
        },
        {
            country: 'Europe',
            year: '1750',
            value: 163,
        },
        {
            country: 'Europe',
            year: '1800',
            value: 203,
        },
        {
            country: 'Europe',
            year: '1850',
            value: 276,
        },
        {
            country: 'Europe',
            year: '1900',
            value: 408,
        },
        {
            country: 'Europe',
            year: '1950',
            value: 547,
        },
        {
            country: 'Europe',
            year: '1999',
            value: 729,
        },
        {
            country: 'Europe',
            year: '2050',
            value: 628,
        },
    ])
}, 2000);
@xiaopujun xiaopujun added the Bug Something isn't working label Nov 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant