3

我绝不是网页设计师，所以我希望您愿意提供尽可能详细的帮助。

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

我该怎么做呢？

我知道基本的 HTML 和 PHP，但很长一段时间都没有使用过。

4

3 回答 3

9

我认为大多数建议都是多余的。当您只需要一些简单的条形图时，无需额外的库/依赖项。纯 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 轻松更改单个条的宽度（只需更改宽度）。

于 2009-07-14T20:00:07.973 回答
6

我知道你说你是新手，但你应该看看谷歌可视化 api。它有一些好东西可以做你可能想做的事情。
http://code.google.com/apis/visualization/

于 2009-07-14T19:21:17.100 回答
0

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

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

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

于 2009-07-14T19:23:22.697 回答