0

我想在 HTML 中制作一些统计条形图，在同一个条形图中使用两种不同的颜色表示两个不同的值，例如：从 10 个问题的考试中，6 个问题正确回答，4 个错误回答。在条形图中应出现 60% 的绿色和其他 40% 的红色。

我一直在考虑先显示红色的，然后再显示绿色的，所以它覆盖了下部，如下所示：

风格

.bar1{
    width:40px;
    background-color:#A55541;
    position:left;
}
.bar2{
    width:40px;
    background-color:#CA804F;
    position:left;
}

HTML

<div style="height:<?=$max ?>px; margin-top:10px;" class="bar1"</div>
<div style="height:<?=$max-($mistakes*$scale) ?>px; margin-top:10px;" class="bar2"</div>

但它不起作用。有谁知道怎么解决？？我一直在这里寻找类似的问题，但找不到。

4

3 回答 3

1

要使此代码正常工作，请创建另一个类，例如：

.container {
       width : 40px;
       height: 100px;
       position: relative
 }

并使 bar1 相对位置和 bar2 绝对位置，底部：0px 和 z-index：100。现在在容器类中添加两个 div 并在 php 中设置 bar2 'top' 而不是 height 。

于 2013-08-14T15:41:31.960 回答
1

你可以尝试这样做：

PHP

<?php
$max = 300;
$mistakes = 100;
$scale = 1;
?>

HTML

<div style="height:<?=$max ?>px;" class="bar1"></div>
<div style="height:<?=$max-(mistakes*scale) ?>px;" class="bar2"></div>

CSS

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

http://jsfiddle.net/BDNXS/

于 2013-08-14T15:20:15.077 回答
0

这是否符合您的要求？

<?php
$max = 100;
$mistakes = 40;
$scale = 1;
?>
<html>
<style>
.bar1{
    width:40px;
    background-color:green;
    float:left;
        z-index:1;
        position: absolute;
}
.bar2{
    width:40px;
    background-color:red;
    float:left;
    z-index:2;
        position: absolute;
}
</style>
<div style="height:<?php echo $max ?>px;" class="bar1"></div>
<div style="height:<?php echo $max -($mistakes*$scale) ?>px;" class="bar2"></div>
</html>

我添加了一个 echo 并去掉了 margin-top，因为它弄乱了我认为你想要的布局。

于 2013-08-14T15:01:29.927 回答