單頁面多Highcharts圖形,高度寬度自適應
阿新 • • 發佈:2019-01-09
資料圖形展示頁面,四個圖形,上邊倆,下邊倆,客戶機的解析度不同,所以如果把圖形的寬度高度寫死,那麼會造成螢幕顯示不友好,抽空想了下,很簡單
- 先讓圖形浮動,程式碼很簡單:
<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">
- 效果如下,改變窗體大小,圖形跟著變換: