highchart宽度自适应的问题-图表压缩到一起
2015-03-30 10:58
357 查看
之前有个项目用到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:
遗留问题:设定了固定宽度后,当浏览器缩小的时候,失去了自适应的能力。
解决方案三:
highchart的API:chart.reflow ()
Reflows the chart to its container. By default, the chart reflows automatically to its container following a
根据这个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原理相关的,回头深入学习了总结一下。
这个时候出现了一个问题,当图收缩后,再展示的时候,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.resizeevent, 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原理相关的,回头深入学习了总结一下。
相关文章推荐
- 百度echart图表宽度自适应问题的一种解决思路
- highchart绘制条形图(bar)时,条形图缺失的问题解决
- Javascript按比例压缩图片,解决onload无法读取图片的高度和宽度问题
- 进一步封装highchart,打造自己的图表插件:jHighChart.js
- SSH+Highcharts 生成动态图表 ——在思考中解决问题
- highchart 导出中文问题
- HighChart前后台封装,构造个性化图表插件highChartTools,快捷创建各种图表
- 进一步封装highchart,打造自己的图表插件:jHighChart.js
- DIV在100%下iframe宽度高度的自适应的问题
- json截取的字符串在highchart中不能用的问题解决
- jquery图表范例及推荐highchart+sparkline
- 一个常见问题的解决——Ext grid的宽度高度如何自适应
- 使用AngularJS结合Highchart图表动态获取JSON格式数据
- highchart在bootstrap的Tab组件下容器问题
- highchart是个好东西,html做图表,jq太强大了
- highchart几个图表马金摘要
- 浏览器兼容问题项目总结(二)Highchart 在chrome下x轴文字竖直显示(兼容IE和Chrome)
- DIV在100%下iframe宽度高度的自适应的问题
- 关于FusionCharts图表宽度width的设置问题导致图表显示异常的解决办法
- 自动化邮件报告平台-邮件发送highchart图表