Question

我正在尝试制作一个显示数据库条形图统计信息的脚本。为了做到这一点，我想在另一个用不同颜色绘制一个条形，所以结果是一个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给了我关于如何画两个酒吧的答案。

Answer 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/

希望有所帮助

绘制条形图的HTML问题

1 个答案: