單頁面多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">- 效果如下，改變窗體大小，圖形跟著變換：
