hightchart 图表自适应 reflow()
在项目中遇到highchart图表在其容器盒子宽高变化时图表重绘的问题，为了体验效果，要求图表自适应容器变化，而不是图表重新加载在highchart的api文档中查找到了reflow()方法可以自适应，但是使用之后发现没有作用，因为找不到相关资料，所以自行解决了这个问题，猜测是因为图表的容器盒子宽高使用的是百分比：.chartcontanier{width: 100%;...
·
在项目中遇到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不生效还是因为不能获取到其真实的宽高，如有其它的看法请留言，谢谢。
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)