web - 网站上的条形图

Question

我绝不是一个网页设计师，所以我想要你愿意提供的详细帮助。

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

我该怎么做呢？

我知道基本的 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 轻松更改单个条的宽度(只需更改宽度)。