highchart寬度自適應的問題-圖表壓縮到一塊兒

以前有個項目用到highchart展現圖表。因爲圖比較多，便作了一個能夠根據須要使圖進行自動伸展和收縮的按鈕，當點擊收縮時，圖slideup收縮起來。

這個時候出現了一個問題，當圖收縮後，再展現的時候，highchart生成的圖變形了。。。。oh mygod~~~

咱們來一塊兒思考一下，變形的表象是什麼？

審查元素可知，是寬度小了。寬度小了，圖裏面的元素擠壓到了一塊兒，造成了一個小塊，模糊不清。

變形的本質是什麼？

搜索highchart的配置相關文檔（可見http://www.helloweba.com/view-blog-156.html），發現highchart自己在建立的時候chart的寬度是能夠不用設定的。而我在項目中正好也沒設定。因而乎該chart的寬度根據父div來自適應。那麼可能就是根據父div來自適應的時候出現了問題。

個人父元素div，也就是chart的容器，設定了寬度爲48%百分比。個人chart在收縮的時候，恰好寬度爲48px.這讓我不由想到是否之間有相關的關係。

當我把寬度設定爲50%時，出現問題的highchart的寬度天然成爲了50px.基本能夠肯定是因爲父元素寬度的問題。

此時解決方案一來了：

將原來的寬度設置爲固定px寬度，例如500px.問題解決。原來是因爲個人按鈕使得highchart發生收縮的時候，highchart觸發了自適應的一個寬度調整，而父div寬度設置的寬度爲百分比，因而highchart取了那個百分比前面的數據爲本身的寬度。。。。汗。。。highchart不該該判斷一下是百分比仍是固定px設置麼？

遺留問題：此時仍是會有遺留問題。那麼多寬度不一的屏幕和屏幕分辨率，誰說個人highchart圖就必定要寬度固定咩？哼哼哼~~~

解決方案二：

建立highchart的時候，沒有固定寬度，那麼我能夠給一個固定寬度。固然，這個固定寬度，其實也是動態獲取的父div容器的寬度，而後設定，至關於給了個默認的寬度。而後highchart就不會本身適應來適應去啦~~~弄的我好怕怕...（PS:本質仍是highchart的寬度有點奇怪，取了width：a%裏的a px來做爲寬度）

eg:

 1 var myWidth = $('#container').css('width').slice(0,-2);//獲取container容器的寬度，建立時自帶寬度。會帶有px，highchart的width只認數字。
 2 $('#container').highcharts({
 3             chart: {
 4                 type: 'arearange',
 5                 width:myWidth;
 6             },
 7             
 8             title: {
 9                 text: 'title'
10             },
11         
12             xAxis: {
13                 type: 'datetime'
14             },
15             
16             yAxis: {
17                 title: {
18                     text: null
19                 }
20             },
21         
22            
23             
24             legend: {
25                 enabled: false
26             },
27         
28             series: [{
29                 name: 'Temperatures',
30                 data: data,
31                 color: '#FF0000',
32                 negativeColor: '#0088FF'
33             }]
34         
35         });
36     });

遺留問題：設定了固定寬度後，當瀏覽器縮小的時候，失去了自適應的能力。

解決方案三：

highchart的API:chart.reflow ()

Reflows the chart to its container. By default, the chart reflows automatically to its container following a window.resize event, as per the chart.reflow option. However, there are no reliable events for div resize, so if the container is resized without a window resize event, this must be called explicitly.

根據這個chart的容易reflow這個chart。默認下，chart會伴隨着window.resize事件自動地根據它所屬於的container容器reflow，根據每一個chart.reflow屬性。可是，對於div的resize有一些不可靠的事件，因此若是container 從新調整大小而window沒有觸發resize事件，這個函數必須明確地被調用。

解決方法：

一開始建立highchart的時候，不帶width屬性，這樣保證了自適應。

點擊下拉按鈕，展現完整的higchart圖表的時候，調用chart.reflow()。這樣圖表從新根據container調整了大小。chart恢復到了正常的狀態。嘎嘎嘎~~

reflow的效果能夠查看：http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/reflow-true/

chart會根據window或者frame的大小進行合適的調整。

對於reflow原理相關的，回頭深刻學習了總結一下。