前沿
小编最近在开发可视化图表(HighCharts-Vue)过程中遇到一个奇葩的bug,highCharts的响应式图表只是在windows窗口变化时图表才会随之相应变化,但是当我用js操作父容器高宽时highCharts的响应式图表并不会随之响应。在此记录下来,以便于以后的开发,也希望可以帮助到遇到此坑的小伙伴们。
解决方案:
默认情况下,chart会伴随着window.resize事件自动地根据它所属于的container容器reflow,根据每个chart.reflow属性。但是,对于div的resize有却不会reflow,所以只能自己去监听div(父容器的变化)重新出发chart.setSize()方法,*******Vue中使用方法(先初始化let s = HighCharts.chart(this.id,this.option);然后s.setSize(appwidth,appheight);appwidth,appheight是监听div变化的数值,)*******不过官方推出的方法(chart.reflow)小编测试了一次下发现当你的图表设置为100%的时候每次reflow它是根据windows视窗去响应导致每次都会沾满全屏,所以此方法小编没有用。这样每次变化div的时候就可以做到响应式了。