hightchart 图表自适应 reflow()

在项目中遇到highchart图表在其容器盒子宽高变化时图表重绘的问题,为了体验效果,要求图表自适应容器变化,而不是图表重新加载

在highchart的api文档中查找到了reflow()方法可以自适应,但是使用之后发现没有作用,因为找不到相关资料,所以自行解决了这个问题,猜测是因为图表的容器盒子宽高使用的是百分比:

.chartcontanier{
    width: 100%;
    height: 88%;
    clear: both;
  }

所以highchart不能正确的获取盒子的真实宽高,所以使用的解决方法如下:

document.getElementById('chartcontanier').style.width = document.getElementsByClassName('forecast')[0].clientWidth + 'px';
document.getElementById('chartcontanier').style.width = 100 + '%';
this.charts.reflow();

首先将容器盒子的宽度设置为父容器的宽高,然后为了图表在屏幕变化能够适应其相应的变化,再将其宽度设置为100%就能随着屏幕宽度变化而变化,然后再调用reflow方法就能生效。

猜测为什么reflow不生效还是因为不能获取到其真实的宽高,如有其它的看法请留言,谢谢。

你可能感兴趣的:(前端框架)