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:

var myWidth = $('#container').css('width').slice(0,-2);//獲取container容器的寬度，創建時自帶寬度。會帶有px，highchart的width只認數字。
$('#container').highcharts({
            chart: {
                type: 'arearange',
                width:myWidth;
            },
            
            title: {
                text: 'title'
            },
        
            xAxis: {
                type: 'datetime'
            },
            
            yAxis: {
                title: {
                    text: null
                }
            },
        
           
            
            legend: {
                enabled: false
            },
        
            series: [{
                name: 'Temperatures',
                data: data,
                color: '#FF0000',
                negativeColor: '#0088FF'
            }]
        
        });
    });

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

解決方案三：

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原理相關的，回頭深入學習了總結一下。