Fatal编程技术网
  • php/
  • Php 绘制条形图的HTML问题

Php 绘制条形图的HTML问题

php html charts

Php 绘制条形图的HTML问题,php,html,charts,Php,Html,Charts,我试图制作一个脚本，从数据库中显示为条形图统计数据。为了做到这一点，我在用不同的颜色绘制一个条到另一个条，结果是一个2色条，可以同时显示两个值，在我的例子中，总共尝试了很多次，出现了很多错误 然后，我想在一排显示这2个彩色条数。但问题在于我写的脚本，所有的条都是一个接一个出现的，而不是并排出现的。谁能告诉我我做错了什么 $Errors=explode("-",$row['fails']); $Total=explode("-",$row['num_col']); foreac

我试图制作一个脚本，从数据库中显示为条形图统计数据。为了做到这一点，我在用不同的颜色绘制一个条到另一个条，结果是一个2色条，可以同时显示两个值，在我的例子中，总共尝试了很多次，出现了很多错误

然后，我想在一排显示这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>

$Errors=explode（“-”，$row['fails']）；
$Total=分解（“-”，$row['num_col']）；
foreach（$key=>$value的错误）
{
$max=$Total[$key]；
$errors=$values；
$scale=10；
$Green=$max*$scale；
$Red=$errors*$scale；
//回显“结果”。（$max-$errors）。“/”$max.“
”；
?>
.bar1{
宽度：40px；
背景色：红色；
位置：绝对位置；
}
.bar2{
宽度：40px；
背景颜色：绿色；
位置：固定；
}
.差距{
宽度：100px；
浮动：左；
}
.空间{
宽度：20px；
浮动：左；
}
.集装箱{
宽度：40px；
高度：100px；
职位：相对
}
只是补充一下，几天前我问了一个类似的问题：@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>