HTML problems drawing bar charts

问题

I'm trying to make a script that display into a bar chart statistics from a database. To do that I thought in draw one bar over another with diffent colours, so the result is a 2 coloured bar, that can display two values at the same time, in my case a number of mistakes over from a total of tries.

Then I would like to display in a row several of this 2 coloured bars. But the problem is with the script I wrote, all bars appear one over another, instead of side by side. Could anyone tellme what I'm doing wrong??

 $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>

Just add, I asked a similar question a few days ago: HTML vertical bar of two different colors And @Tiago gave me the answer about how to draw two bars together.

回答1:

you have a problem with that: what if there are more answers wrong?? the green won't show. I know it was me that gave that solution but i've found another one, better i think:

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>

Example

If you have:

$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>

You will get the fisrt bar one this fiddle.

http://jsfiddle.net/tZDay/

Hope it helped

来源：https://stackoverflow.com/questions/18279715/html-problems-drawing-bar-charts

标签

php

html

charts