我试图让一个脚本显示到数据库的条形图统计。为了做到这一点，我想在一个条形图上绘制不同的颜色，所以结果是一个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问题
发布评论