我试图让一个脚本显示到数据库的条形图统计。为了做到这一点,我想在一个条形图上绘制不同的颜色,所以结果是一个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>
http:// jsfiddle/tZDay/
希望它帮助
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.
jsfiddle/tZDay/
Hope it helped
更多推荐
绘制条形图的HTML问题
发布评论