繪製條形圖的HTML問題

我試圖製作一個腳本，顯示爲從數據庫中的條形圖統計信息。要做到這一點，我認爲用不同的顏色在另一個欄上劃一個欄，所以結果是一個2色的欄，它可以同時顯示兩個值，在我的案例中，總共嘗試了一些錯誤。繪製條形圖的HTML問題

然後，我想連續顯示這2個彩條中的幾個。但是問題出在我寫的腳本上，所有的酒吧都是一個接一個地出現，而不是並排。誰能告訴我我做錯了什麼？

$Errors=explode("-",$row['fails']); 
    $Total=explode("-",$row['num_col']); 

    foreach($Errors as $key => $values) 
    { 
     $max = $Total[$key]; 
     $mistakes = $values; 
     $scale = 10; 

     $Green=$max*$scale; 
     $Red=$mistakes*$scale; 

     //echo "Result ".($max-$mistakes)."/".$max."<br>"; 

    ?> 
    <html> 
    <style> 
    .bar1{ 
     width:40px; 
     background-color:red; 
     position:absolute; 

    } 
    .bar2{ 
     width:40px; 
     background-color:green; 
     position:fixed; 

    } 

    .gap{ 
     width:100px; 
     float:left; 
    } 
    .space{ 
     width:20px; 
     float:left; 
    } 
    .container { 
     width : 40px; 
     height: 100px; 
     position: relative 
} 

    </style> 
    <body> 
    <?php 

     echo' 

      <div class="container"><div style="height:'.$Green.'px;" class="bar2"></div> 
      <div style="height:'.$Red.'px;" class="bar1"></div> 
      <div style="height:200 px;" class="space"></div></div> 

     '; 


    } 
    ?> 
    </body> 
    </html>

只需添加，我前幾天問了一個類似的問題：HTML vertical bar of two different colors而@Tiago給我說說如何繪製兩條槓起來了答案。

來源

2013-08-16 Ignacio Alorre

你有一個問題：如果有更多的答案錯誤？綠色不會顯示。我知道這是我給的是解決方案，但我已經找到另一個更好，我認爲：

HTML

<div class="group" style="width: 30px;background-color: //option with more answers; height: //total answers; float:left;> 
    <div style="width: 100%;background-color://the other color; height://option with less answers; margin-top://total-option with less answers; "></div> 
</div>

例

如果您有：

$total = 500; 
$wrong = 200; 
$correct = 300; 

if ($wrong>$correct) { 
    $color1 = 'red'; 
    $color2 = 'green'; 
    $less = $correct; 
} 
else { 
    $color2 = 'red'; 
    $color1 = 'green'; 
    $less = $wrong; 
} 

<div class="group" style="width: 30px;background-color: <?php echo $color1; ?>; height: <?php echo $total; ?>; float:left;"> 
    <div style="width: 100%;background-color:<?php echo $color2; ?>; height:<?php echo $less; ?>; margin-top:<?php echo ($total-$less); ?>"></div> 
</div>

你會得到fisrt酒吧這一小提琴。

http://jsfiddle.net/tZDay/

希望它幫助

來源

2013-08-19 11:18:19 Tiago

感謝，再次真正有用 –

繪製條形圖的HTML問題

回答

相關問題