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原理相关的，回头深刻学习了总结一下。