Web 网站上的条形图

我绝不是一个网页设计师，所以我希望你能给我尽可能详细的帮助

我想做一个网站，跟踪一些数据，我输入使用条形图从0-100%。我会输入图形可以到达的最大数量，然后一些数据点会偶尔更新，完成条形图会反映出来

我该怎么做呢

---

我知道基本的HTML和PHP，但已经很长时间没有使用了。

我知道你说你是新手，但你应该看看谷歌可视化api。它有一些好东西可以做你可能想做的事情。

---

有两种方法可以解决这个问题；在后端生成图形（在您的案例中可能使用PHP），或者在客户端使用javascript生成图形

我不确定在PHP中执行此操作的具体细节，因为我并不真正了解该语言，但我确信有很多关于PHP中图形生成的信息

---

对于javascript方法，我以前使用过（jquery）和（prototype）。我非常喜欢它们，关于如何生成各种图表，包括条形图，这两个库都有一些很好的文档和示例。

我认为大多数建议都有些过分。当您只需要一些简单的条形图时，不需要额外的库/依赖项。简单的HTML/CSS应该可以

PS：快速代码示例，仅在Firefox3.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>

.酒吧
{
背景颜色：绿色；
位置：相对位置；
高度：16px；
边缘顶部：8px；
边缘底部：8px；
}

---

您可以使用javascript轻松更改单个条的宽度（只需更改宽度）。

这实际上正是我想要的。使用PHP变量实现百分比应该很简单。这个网站只适合我个人，所以我不担心得到一些真正花哨的东西。这正是工作。回答你。