在网站上的条形图

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

我知道你说你是新手,但你应该看一下google visual api.做一些你可能想要的东西有一些好东西.
http://code.google.com/apis/visualization/