antvis/G2

autoFit 第一次变化有 bug #5996

YY88Xu posted onGitHub

问题描述

<img width="1069" alt="image" src="https://github.com/antvis/G2/assets/14836228/b8f8f20b-fbc9-4f6f-99c6-5b60ffa3ace5"> 如图,容器动态变化,1s 后宽度变为 100px, 但是图表并没有变化

import { Chart } from '@antv/g2';

const data = [
  { year: '1951 年', sales: 38 },
  { year: '1952 年', sales: 52 },
  { year: '1956 年', sales: 61 },
  { year: '1957 年', sales: 145 },
  { year: '1958 年', sales: 48 },
  { year: '1959 年', sales: 38 },
  { year: '1960 年', sales: 38 },
  { year: '1962 年', sales: 38 },
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart.interval().data(data).encode('x', 'year').encode('y', 'sales');

chart.render();

setTimeout(()=>{
  const container = document.getElementById('container')
  container.style.width = '100px'
  container.style.border = '1px solid black'
}, 2000)

重现链接

No response

重现步骤

No response

预期行为

No response

平台

  • 操作系统: [macOS, Windows, Linux, React Native ...]
  • 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频(可选)

No response

补充说明(可选)

No response


autoFit 不会去监听容器变化事件,如果希望图表跟随容器,可以自己监听容器变化事件,然后调用 chart.forceFit()

posted by pearmini over 1 year ago

因为 G2 监听的是 window resize 事件,所以修改容器样式之后,手动出发一个 window resize 事件也可以实现。

posted by hustcc over 1 year ago

@pearmini @hustcc 监听的是 window resize 事件有问题,就是容器的宽度是按照百分比给的比如 60%,当用户直接调整浏览器页面大小会触发 resize 没有问题。但是在微前端环境下,左侧菜单有可能会收起来,那么这个时候只是容器改变了大小,图表不会forceFit。 如果设置 autoFit 为 true,自己监听容器大小变化,调用 chart.forceFit() 会进入死循环,页面一直会调用监听容器的函数。手动出发一个 window resize 事件,也是会死循环。

如果监听直接监听容器的大小,自己实现autoFit 为 false。new Chart({ container: eeChartRef.value, autoFit: false }) 怎么给 width 和 height 呢?因为 width 和 height 不支持 100% 这种设置。

posted by YY88Xu over 1 year ago
  1. 关闭 autoFit
  2. 监听容器大小变化,或者容器宽高,可以使用 size-sensor 库
  3. 容器变化的时候,调用 chart.changeSize 方法
posted by hustcc over 1 year ago

Fund this Issue

$0.00
Funded

Pull requests