在一个网站上的条形图

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/