在网站上条形图

Question

我决不是一个网页设计师，所以我想尽可能详细的帮助，你愿意给。

我想使该跟踪一些数据i输入使用从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方法中，我用两个海军报（jQuery的）和 flotr （原型）之前。我喜欢他们很多，有关于如何生成各种图表，包括条形图两种库的一些好的文档和示例。