Chart forceFit为true的状态下，父组件css样式加载完后，Chart不能自适应父类组件宽度。

[rex11458]

.ant-col-18 {
display: block;
width: 75%

...

[weepy3641]

forceFit 是监听 window resize 事件的，如果 resize 事件没有触发，那就没办法适应了。
可能是你初始化 chart 的时机不对，或者容器的 width 跟你的预期不一样？

你有没有设置 width 属性？

[rex11458]

Chart没有设置width属性。父组件通过element.style设置的宽度,Chart能够自动适应，但是通过css文件引入的样式，就会有问题。 我怀疑是css文件没有加载完成，绘图已经开始了，等到父组件样式加载出来后，Chart没有重绘。 初始化Chart的时机我应该控制？

[OPY-bbt]

你是不是在开发模式下，生产环境没有这个问题。

[rex11458]

我刚在生产环境看了，也有同样的问题。 在当前页刷新，window resize事件没有触发，canvas父类div的宽度已经改变了，但是canvas的宽度没有改变。

[weepy3641]

@rex11458
http://blog.csdn.net/vitohe/article/details/44590295
要不你主动触发 resize 事件。。。

[zeratul-k]

mark下，同遇到此问题，还未找到好的解决方案。

[weepy3641]

#132

跟 G2 那边的人商量过了，推荐初始化时设置容器 size。
同时切换页面后强制 forcetFit 。

// 例如
render() {
    if (this.chart) {
      this.chart.forceFit();
    }
    return (<Chart
      {...opts}
      onGetG2Instance={(chart) => {
        this.chart = chart;
      }}
    />);
  }

[xxxlihui]

试下用这个包装下
class ResizeChart extends React.Component {
constructor(props) {
super(props)
}

componentWillUnmount() {
this.char = null
this.props.onUnmount && this.props.onUnmount(this.char)
}

componentDidUpdate() {
this.timeout && clearTimeout(this.timeout) && (this.timeout = null)
this.timeout = setTimeout(() => {
this.char && this.char.forceFit()
}, 300)
}

render() {
return <Chart {...this.props} onGetG2Instance={char => {
this.char = char
this.props.onGetG2Instance && this.props.onGetG2Instance(char)
}
}>
{this.props.children}

}
}

[thetimbecker]

#279

[gaius-qi]

可以在图表渲染前添加 loading，防止 data 为空时对图表进行渲染。

if (data.length === 0) {
  return <div>spin</div>;
}

[huangnan20030709]

狗日的，开了strictMode，缩小宽度就不会自适应