绘制条形图的HTML问题 [英] HTML problems drawing bar charts
问题描述
我试图让一个脚本显示到数据库的条形图统计。为了做到这一点，我想在一个条形图上绘制不同的颜色，所以结果是一个2色的条，可以显示两个值在同一时间，在我的情况下，一些错误从一个总尝试。 p>
然后，我想在一行中显示几个这2个彩色条。但问题是我写的脚本，所有的酒吧一个在另一个，而不是并排。任何人都可以告诉我我做错了什么？
$ Errors = explode（ - ]）;
$ Total = explode（ - ，$ row ['num_col']）;
foreach（$ Errors as $ key => $ values）
{
$ max = $ Total [$ key];
$ mistakes = $ values;
$ scale = 10;
$ Green = $ max * $ scale;
$ Red = $ mistakes * $ scale;
// echoResult。（$ 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：'。 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 =groupstyle =width：30px; background-color：// option with more answers; height：// total answers ; float：left;>
< div style =width：100％; background-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 =groupstyle =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>
希望它帮助
I'm trying to make a script that display into a bar chart statistics from a database. To do that I thought in draw one bar over another with diffent colours, so the result is a 2 coloured bar, that can display two values at the same time, in my case a number of mistakes over from a total of tries.
Then I would like to display in a row several of this 2 coloured bars. But the problem is with the script I wrote, all bars appear one over another, instead of side by side. Could anyone tellme what I'm doing wrong??
$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>
Just add, I asked a similar question a few days ago: HTML vertical bar of two diferent colors And @Tiago gave me the answer about how to draw two bars together.
you have a problem with that: what if there are more answers wrong?? the green won't show. I know it was me that gave that solution but i've found another one, better i think:
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>
Example
If you have:
$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>
You will get the fisrt bar one this fiddle.
Hope it helped
这篇关于绘制条形图的HTML问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
