PHP+MySQL開發小項目的集合筆記（四）控制div的排列和p標籤，從另外表讀取加工數據並規定小數點位數

需求：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循環的相加中要求最終的得數也要得到小數點一位。