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

#132

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

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

from bizcharts.

试下用这个包装下
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}

}
}

from bizcharts.

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

你有没有设置 width 属性？

from bizcharts.

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

from bizcharts.

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

from bizcharts.

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

from bizcharts.

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

from bizcharts.

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

from bizcharts.

#279

from bizcharts.

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

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

from bizcharts.