どのように私は私が達成したいどのようなSQLの列の値に応じて、幅のDIV

Question

を拡張します：

私はクライアントをupvoteとき、私がダウンして赤を投票するときだから、基本的に緑色のバーが増加してますバーが増加する。

私は現在、あなたのアップまたはダウンの投票は、それが2つの異なる列の値をデータベースに送信したときになるように、それは働いてい：正と負。バーがある画像では、現在空のdivがあります。

投票数に基づいてdivを拡張するにはどうすればよいですか？

マイclients.php：

<?php 

$clientInfo = "SELECT * FROM Clients ORDER BY Client ASC"; 
$stmt = sqlsrv_query($conn, $clientInfo); 

echo "<div style='width: 100%; display: inline-block;'>"; 

while ($client = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)) 
{ 
    echo "<div class='clientid' style='height: 50px; font-size: 18px; vertical-align: middle; display: inline-block; width: 100%'>" . 

      " 
      <div style='width: 35%;'> 
       <div style='color: green;'></div> 
      </div> 

      <div style='display: inline-block; width: 5%;'>  
       <span style='font-size: 20px;' class='hover-cursor fa fa-chevron-up vote-up'></span> 
      </div>" . 

       "<div class='hover-cursor hvr-underline-reveal voteup votedown' data-clientid='{$client['ClientID']}' style='width: 20%; display: inline-block;'>" . $client['Client'] . "</div>" . 

      "<div style='display: inline-block; width: 5%;'> 
       <span style='font-size: 20px; text-align: right;' class='hover-cursor fa fa-chevron-down vote-down'></span> 
      </div> 

      <div style='width: 35%;'> 
       <div style='color: red;'></div> 
      </div> 

     </div> 
     <br />"; 
} 

echo "</div>"; 

?> 

そのプログレスバーとなり、35％の幅を持つ2つのdiv。

列は投票総数の割合に基づいて表示されるはずです。つまり、4票、3票1減、75％緑、25％赤が表示されます。

Answer 1

これを行うには、データベースから賛成と反対の投票を行い、投票総数を数えます。

次に、両方の割合を調べ、コードの幅を設定する必要があります。 「％」と最後を追加して、ブラウザがパーセンテージで作業していることを確認してください。

1がダウンして3ここで、我々は、上記のあなたの例を取る場合は、次のようになり数学次第です：

y = (1/4)*100 = 25% 

ここで私はあなたのコードでそれを実装している：

$clientInfo = "SELCT * FROM Clients ORDER BY Client ASC"; 
$stmt = sqlsrv_query($conn, $clientInfo); 

echo "<div style='width: 100%; display: inline-block;'>"; 

while ($client = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)) { 
    $positive = $client['positive']; 
    $negative = $client['negative']; 
    $total = ($positive+$negative); 

    // Calculate width in percentage 
    $positiveWidth = ($positive/$total)*100."%"; 
    $negativeWidth = ($negative/$total)*100."%"; 

    // The output 
    echo "<div class='clientid' style='height: 50px; font-size: 18px; vertical-align: middle; display: inline-block; width: 100%'>" . 

    " 
    <div style='width: $positiveWidth;'> 
     <div style='color: green;'></div> 
    </div> 

    <div style='display: inline-block; width: 5%;'>  
     <span style='font-size: 20px;' class='hover-cursor fa fa-chevron-up vote-up'></span> 
    </div>" . 

     "<div class='hover-cursor hvr-underline-reveal voteup votedown' data-clientid='{$client['ClientID']}' style='width: 20%; display: inline-block;'>" . $client['Client'] . "</div>" . 

    "<div style='display: inline-block; width: 5%;'> 
     <span style='font-size: 20px; text-align: right;' class='hover-cursor fa fa-chevron-down vote-down'></span> 
    </div> 

    <div style='width: $negativeWidth;'> 
     <div style='color: red;'></div> 
    </div> 

    </div> 
    <br />"; 
} 

echo "</div>";