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/

Answer 3

有两种方法可以解决这个问题;在后端生成图形（可能在您的情况下使用PHP）或使用javascript在客户端执行。

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

对于javascript方法，我之前使用了flot（对于jquery）和flotr（对于原型）。我非常喜欢它们，并且两个库都有一些很好的文档和示例，介绍如何生成各种图表，包括条形图。

在网站上的条形图

3 个答案: