创建水平条形图

Question

我想在网页中使用php，mysql，javascript，css，html和'wamp server'制作横条形图，编辑：'Macromedia Dreamweaver'，浏览器：'Mozilla Firefox';

---

我想从表中读取数据（semister结果），并通过条形图显示数据，如，

---

• 数据库名称 exam

• 表名 'sem_result'包含以下列＆gt;＆gt; regno[Primary key], uid, reg_date, exam_date, sem, result;

---

php代码是::

<?php
// Connect to server
$cn=mysql_connect("localhost", "root", "");
//Connect to Database
mysql_select_db("exam") or die(mysql_error());
//sql query
$sql="SELECT result FROM sem_result WHERE uid=11111";
//collect results
$result=mysql_query($sql,$cn);
//read data if found
$counter=0;
while($rd=mysql_fetch_array($result))
{
 $sem_result[$counter]=$rd[0]; //save sem results into array
 $counter=$counter+1;
}
//display
echo "<table>
<tr>
    <td>sem1</td>
    <td width='100px'>
      <img src='img/menu_back.png' width='".$sem_result[0]."%' height='15px'/>
    </td>
    <td>".$sem_result[0]."%</td>
</tr>
<tr>
    <td>sem2</td>
    <td width='100px'>
      <img src='img/menu_back.png' width='".$sem_result[1]."%' height='15px'/>
    </td>
     <td>".$sem_result[1]."</td>
</tr>
</table>";
//close database
mysql_close($cn);
 ?>

---

如果结果为78.95％，78.10％，条形图显示两者结果相等，即78％;
图像宽度变为78％，而不是78.95％请帮助解决这个问题。

Answer 1

更改表名和列名以及progress.png图像。 在那之后使用它。

`

<?php $s="select count(*) as tnum from leakage";
$r=mysql_query($s) or die (mysql_error());
while($rw=mysql_fetch_array($r))
{
echo $tno=$rw['tnum'];
}
?>

<table class="table table-hover">
<thead>
<tr>
 <th>DEPARTMENT</th>
 <th>No.Of Leakage</th>
</tr>
</thead>
<?php 
  $sql1="select dept,count(dept) as total from leakage where dept='winding'";
 $result1=mysql_query($sql1) or die(mysql_error());
 while($row=mysql_fetch_array($result1))
 {

 $dept=$row['dept'];
  $tot=$row['total'];
 }                                  
 ?>
 <tr>
 <td><?php echo $dept; ?></td>
 <td width="100%"><img src="assets/images/progress.png" width="<?php   echo (($tot/$tno)*100);?>" height="20px"><?php echo $tot;?>%</td>

 </tr>

 <?php 
   $sql2="select dept,count(dept) as total from leakage where dept='spining'";
   $result2=mysql_query($sql2) or die(mysql_error());
   while($row=mysql_fetch_array($result2))
   {

  $dept=$row['dept'];
 $tot=$row['total'];
  }     
  ?>
   <tr>
 <td><?php echo $dept; ?></td>
  <td width="100%"><img src="assets/images/progress.png" width="<?php echo (($tot/$tno)*100);?>" height="20px"><?php echo $tot;?>%</td>

    </tr>
   <?php 
    $sql5="select count(dept) as total from leakage";
    $result5=mysql_query($sql5) or die(mysql_error());
    while($row=mysql_fetch_array($result5))
   {

     $tot=$row['total'];
   }        
   ?>
   <tr>
   <td>Total</td>
       <td width="100%"><img src="assets/images/progress.png" width="<?php echo $tot;?>" height="20px"><?php echo $tot; ?></td>
     </tr>
      </table>

`

Answer 2

正如@hakre已经指出的那样，你不能比单个像素或百分比更准确，即你不能拥有78.5px或78.5％...但是，你还有一些选择没有javascript。首先，我不确定为什么你使用绿色条形图，为什么不纯粹的html / css？不管怎样，这是我的建议：

获取条形图的总宽度，范围为0 - 100（以像素为单位）。只要通过观察您发布的图像，我就称之为325px：

$total_width = '325';

然后，将每个条的宽度设置为：

$bar_width = round($total_width * ($sem_result[0] / 100));

这样，78.10％的存储值最终将为254px，78.95％将为257px。它仍然不是确切的百分比，但它更接近。图表的总宽度越长，计算的精确度就越高。