前沿

小編最近在開發(fā)可視化圖表(HighCharts-Vue)過程中遇到一個(gè)奇葩的bug，highCharts的響應(yīng)式圖表只是在windows窗口變化時(shí)圖表才會(huì)隨之相應(yīng)變化，但是當(dāng)我用js操作父容器高寬時(shí)highCharts的響應(yīng)式圖表并不會(huì)隨之響應(yīng)。在此記錄下來，以便于以后的開發(fā)，也希望可以幫助到遇到此坑的小伙伴們。

解決方案：

默認(rèn)情況下，chart會(huì)伴隨著window.resize事件自動(dòng)地根據(jù)它所屬于的container容器reflow，根據(jù)每個(gè)chart.reflow屬性。但是，對(duì)于div的resize有卻不會(huì)reflow，所以只能自己去監(jiān)聽div(父容器的變化)重新出發(fā)chart.setSize()方法，*******Vue中使用方法（先初始化let s = HighCharts.chart(this.id,this.option);然后s.setSize(appwidth,appheight);appwidth，appheight是監(jiān)聽div變化的數(shù)值，）*******不過官方推出的方法（chart.reflow）小編測(cè)試了一次下發(fā)現(xiàn)當(dāng)你的圖表設(shè)置為100%的時(shí)候每次reflow它是根據(jù)windows視窗去響應(yīng)導(dǎo)致每次都會(huì)沾滿全屏，所以此方法小編沒有用。這樣每次變化div的時(shí)候就可以做到響應(yīng)式了。