单页面多Highcharts图形,高度宽度自适应

数据图形展示页面,四个图形,上边俩,下边俩,客户机的分辨率不同,所以如果把图形的宽度高度写死,那么会造成屏幕显示不友好,抽空想了下,很简单

  • 先让图形浮动,代码很简单:
<div>
    <div id="container1" style="min-width: 600px; min-height: 400px; float:left"></div>
    <div id="container2" style="min-width: 600px; min-height: 400px; float:left"></div>
    <div id="container3" style="min-width: 600px; min-height: 400px; float:left"></div>
    <div id="container4" style="min-width: 600px; min-height: 400px; float:left"></div>
</div>
  • 使用jquery:
		$(window).resize(function() {
			var width_frm = $(document.body).width();
			var height_frm = $(document.body).height();
  			var width_div = width_frm/2;
			var height_div = height_frm/2;
			
			$('#container1').css("height", height_div);
			$('#container1').css("width", width_div);
			
			$('#container2').css("height", height_div);
			$('#container2').css("width", width_div);
			
			$('#container3').css("height", height_div);
			$('#container3').css("width", width_div);
			
			$('#container4').css("height", height_div);
			$('#container4').css("width", width_div);
		});
  • 这里出现一个问题,无法获取高度,原因是页面的头文件格式不对,改为如下即可:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  • 效果如下,改变窗体大小,图形跟着变换:
单页面多Highcharts图形,高度宽度自适应_第1张图片


你可能感兴趣的:(单页面多Highcharts图形,高度宽度自适应)