我绝不是一个网页设计师,所以我想要你愿意提供的详细帮助。
我想制作一个网站来跟踪我使用 0-100% 的条形图输入的一些数据。我会输入图表可以达到的最大数量,然后偶尔会更新一些数据点,完成条形图会反射(reflect)出来。
我该怎么做呢?
我知道基本的 HTML 和 PHP,但很长一段时间都没有使用过。
最佳答案
我认为大多数建议都是矫枉过正的。当您只需要一些简单的条形图时,无需额外的库/依赖项。纯 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 轻松更改单个条的宽度(只需更改宽度)。
关于web - 网站上的条形图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1127426/