在一個網站上的條形圖

Question

我絕不是一個網頁設計師，所以我想爲你提供詳細的幫助。

我想製作一個網站，跟蹤我使用0-100％條形圖輸入的一些數據。我會輸入圖表可以達到的最大數量，然後偶爾更新一些數據點，完成條形圖將反映這些數據點。

我怎麼會去這樣做呢？

我知道基本的HTML和PHP，但很久沒有用過了。

Answer 1

我想大多數的建議是矯枉過正，沒有必要有當所有額外的庫/依賴性你需要的是一些簡單的條形圖純HTML/CSS應該做的......

PS：快速的代碼示例，只有在Firefox 3.x測試

<style type="text/css"> 
.bar 
{ 
    background-color: green; 
    position: relative; 
    height: 16px; 
    margin-top: 8px; 
    margin-bottom: 8px; 
} 
</style> 

<div id="barcontainer" style="width:200px;"> 
    <div id="bar1" class="bar" style="width:43%;"></div> 
    <div id="bar2" class="bar" style="width:12%;"></div> 
    <div id="bar3" class="bar" style="width:76%;"></div> 
    <div id="bar4" class="bar" style="width:100%;"></div> 
</div> 

你可以很容易地改變單個條的寬度javascript（只是改變寬度）。

Answer 2

我知道你說過你是新的，但你應該看看谷歌可視化api。有一些好的東西可以做你想要的東西。
http://code.google.com/apis/visualization/

Answer 3

有兩種方法可以解決這個問題;在後端生成圖形（可能使用PHP）或者在客戶端使用javascript進行。

我不確定在PHP中使用它的具體細節，因爲我並不真正瞭解該語言，但我確信PHP中的圖形生成中存在大量信息。

對於javascript方法，我以前使用過flot（用於jquery）和flotr（用於原型）。我非常喜歡它們，並且在這兩個庫中都有一些關於如何生成各種圖表（包括條形圖）的很好的文檔和示例。

Answer 4

如果你想保持簡單，只需使用PHP和HTML，你可以使用PHP的GD庫。

這是一個通用圖形庫。

有一個示例here說明如何創建條形圖。

Answer 5

如果你不想做太多的編程你總是可以建立在谷歌電子表格圖表，然後就發佈/嵌入圖表在您的網站：

http://googlesystem.blogspot.com/2007/04/google-spreadsheets-charts.html

Answer 6

我解釋你的問題如：你想把條形圖放在你的網站上。 ExtJS具有良好的執行條形圖（http://extjs.com/deploy/dev/examples/chart/reload-chart.html)，主要缺點是，你將需要學習一些JavaScript。

Answer 7

也許你應該看看D3。 這件事真的很棒。

http://d3js.org/