我正在尝试制作一个脚本，将数据库中的统计信息显示到条形图中。要做到这一点，我想用不同的颜色在另一个条上画一个条，所以结果是一个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给了我关于如何将两个竖条绘制在一起的答案。
您有一个问题：如果有更多的答案错误怎么办？？绿色不会出现。我知道是我给出了这个解决方案，但我找到了另一个，我认为更好的是：
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/
希望它能帮助