0

我正在尝试制作一个脚本，从数据库中显示到条形图统计信息中。为此，我想用不同的颜色在另一个上绘制一个条形图，因此结果是一个 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竖条的两种不同颜色，@Tiago给了我关于如何将两条条画在一起的答案。

4

1 回答 1

1

你有一个问题：如果有更多的答案是错误的怎么办？绿色不会显示。我知道是我提供了那个解决方案，但我找到了另一个，我认为更好：

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>

你会得到这个小提琴的第一个酒吧。

http://jsfiddle.net/tZDay/

希望它有所帮助

于 2013-08-19T11:18:19.470 回答