2013-03-26 127 views
0

任何人都可以幫助我試圖做一個簡單的代碼與PHP和HTML,我的目標是通過數據庫獲得我的變量和張貼數字,並在最後添加%,但與我的代碼它讓我感到困惑。生成一個條形圖與PHP HTML使百分比正確顯示?

最後一個工程,但它的硬編碼。

單擊此處查看圖像。 http://i.stack.imgur.com/0Apoh.png 我以55%的比例顯示黃色圖形,其餘的圖不會被填充在底部圖形中。

<style type="text/css"> 
    .red {background-color: red;} 
    .green {background-color: green;} 
    .yellow{background-color: yellow;} 
    .bar { width: 15%; border: 1px solid #000; background: grey; } 
    </style> 


    <?php 
    if ($percentage >= 51 && $percentage <= 74) { 
    echo "<div class=\"bar\" align=\"left\"><div class=\"yellow\" style=\"width: $percentage %\">$percentage test</div></div>"; 
    } else if ($percentage >= 75){ 
    echo "<div class=\"bar\" align=\"left\"><div class=\"green\" style=\"width: $percentage \"%\">$percentage test</div></div>"; 
    } else if ($percentage >= 0 && $percentage <= 50) { 
    echo "<div class=\"bar\" align=\"left\"><div class=\"red\" style=\"width:46%\">$percentage test</div></div>"; 
    } 
    ?> 

回答

0

我看不出你如何得到的百分比值,但我可以看到你在3種不同的方式定義你的風格: 第一個將產生:寬度:33像素;這是某種正確的,但第二個是錯誤的右邊是:

echo "<div class=\"bar\" align=\"left\"><div class=\"red\" style=\"width:$percenage%\">$percentage test</div></div>"; 

echo "<div class=\"bar\" align=\"left\"><div class=\"red\" style=\"width:".$percentage."%\">$percentage test</div></div>"; 

這是爲了完成上面的回答。 我忘了你也可以使用!重要的論點。 ...寬度:$ percantage%!important;

+0

感謝它的工作,我用第一種方法:) – Dillan 2013-03-26 17:46:13

+0

你能接受答案 - 綠色複選標記嗎? :) – 2013-03-26 17:50:54

+0

是的,我當然確實抱歉新的stackoverflow。 – Dillan 2013-03-27 18:18:41

-1

你不能像這樣在字符串中放置變量。所以,你應該這樣做:

if ($percentage >= 51 && $percentage <= 74) 
    echo "<div class=\"bar\" align=\"left\"><div class=\"yellow\" style=\"width:". $percentage." %\">".$percentage." test</div></div>"; 
+0

仍然沒有我認爲這將工作,如果它在一張桌子也許? – Dillan 2013-03-26 17:41:35