PHP+MySQL開發小專案的集合筆記(四)控制div的排列和p標籤,從另外表讀取加工資料並規定小數點位數
阿新 • • 發佈:2018-12-12
需求:HTML頁面增加註釋,div盒子控制曲線大小,多個盒子相互巢狀。具體資料從另外表內獲取。
HTML頁面更改:
<!-- Morris chart - Sales --> <!-- Change! --> <div class="chart tab-pane active" style="height: 300px;"> <div style="float:left;margin: 15% 0% 0% 1%;word-wrap:break-word; width:76px;">Headcount (man/days)</div> <div class="chart tab-pane active" id="revenue-chart" style="float:left;position: relative; height: 276px;width:86%;" > </div> <p class="margin" style="margin: 0 auto; text-align: center">Number of RMKs</p> </div> <!-- Change End! --> <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div> 根據: var area = new Morris.Area({}) $('.box ul.nav a').on('shown.bs.tab', function () { area.redraw(); donut.redraw(); line.redraw(); }); html: <ul class="nav nav-tabs pull-right"> <li class="active"><a href="#revenue-chart" data-toggle="tab">Area</a></li> 可知與ul.nav的a標籤有關。#revenue-chart
首先要在div盒子外側加邊框border: 1px solid red;來區別盒子的位置。當一個盒子內只有兩個盒子的時候,需要並排可以使用float:left; display:inline;來讓兩個盒子並排。控制盒子的大小最好用直接使用margin: 10% 0% 0% 0%;可以控制上右下左,與旁邊盒子的邊距,padding是控制盒子內的邊距。讓單詞按照單詞的實際寬度換行,可以使用word-wrap:break-word;如果讓其拆單詞方式換行使用其他命令。id是唯一指示符,用來準確定位。讓盒子的位置整體變動使用position: relative;相對於前面的容器定位的,和absolute是相對於瀏覽器的定位。加字,儘量使用p標籤,比div要節省資源。text-align: center可以讓字以中間位置排列。
另外根據html的註釋可以獲取到渲染css的具體位置,檢視Morris的js位置。
從另外表讀取資料,並規定小數點位數的顯示。
while ($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){ $user = new User(); $user->ID = $row["ID"]; $TID = $row["ID"]; $Tempsql = "SELECT * FROM test_sizing WHERE `RMK` = '{$TID}' "; $Tempresult = $mysqli->query($Tempsql); $Temprow = mysqli_fetch_array($Tempresult,MYSQLI_ASSOC); if($Temprow == NULL){ $user->TDC_PlanningHC = "0"; $user->TDC_EntryHC = "0"; $user->TDC_ExitHC = "0"; }else{ for($i = 0;$i < 3;$i++){ $Tsql = "SELECT SUM(Headcount) FROM test_sizing WHERE `RMK` = '{$TID}' AND `Phase` = '{$i}'"; $Tresult = $mysqli->query($Tsql); $Trow = mysqli_fetch_array($Tresult,MYSQLI_ASSOC); if($i == 0){ $TDCPlHC = sprintf("%.1f",$Trow['SUM(Headcount)']); $user->TDC_PlanningHC = $Trow['SUM(Headcount)']; }else if($i == 1){ $TDCEnHC = sprintf("%.1f",$Trow['SUM(Headcount)']); $user->TDC_EntryHC = $Trow['SUM(Headcount)']; }else if($i == 2){ $TDCExHC = sprintf("%.1f",$Trow['SUM(Headcount)']); $user->TDC_ExitHC = $Trow['SUM(Headcount)']; } } } $data[]=$user; } $json = json_encode($data); $djson = json_decode($json,true); $Row1=0; $Row2=0; $Row3=0; $Row4=0; for($i = 0;$i < count($djson);$i++){ $Row1 = 1 + $i; $djson[$i]["y"]=$Row1; $Row2 = $Row2 + floatval($djson[$i]["TDC_PlanningHC"]); $Row2R = sprintf("%.1f",$Row2); $djson[$i]["TDC_PlanningHC"]=$Row2R; $Row3 = $Row3 + floatval($djson[$i]["TDC_EntryHC"]); $Row3R = sprintf("%.1f",$Row3); $djson[$i]["TDC_EntryHC"]=$Row3R; $Row4 = $Row4 + floatval($djson[$i]["TDC_ExitHC"]); $Row4R = sprintf("%.1f",$Row4); $djson[$i]["TDC_ExitHC"]=$Row4R; }
程式碼中加入的內容:$Tempsql,來判斷是否有必要從另外的表內檢視資料。如果沒有必要就設定為0。因為資料是以單列內不同數值0,1,2選擇後,才能找到對應資料。所以需要篩選語句:
$Tsql = "SELECT SUM(Headcount) FROM test_sizing WHERE `RMK` = '{$TID}' AND `Phase` = '{$i}'";
篩選`Phase` = '0'或1或2,按照不同的`RMK` = 'ID',篩選的資料直接求和,然後顯示。其中$TDCPlHC = sprintf("%.1f",$Trow['SUM(Headcount)']);把對應的資料取小數點一位。在for迴圈的相加中要求最終的得數也要得到小數點一位。