当前位置：文江博客话题详情

网站上的条形图

发布于 2024-07-27 04:06:41 字数 190 浏览 8 评论 0原文

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

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

我该怎么做呢？

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

可是我不能没有你 2024-08-03 04:06:41

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

I think most of the suggestions are overkill. No need to have an extra library / dependency when all you need is some simple bargraphs. Plain HTML/CSS should do...

PS: quick code sample, only tested in 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>

You can change the width of individual bars easily with javascript (just change the width).

回复收藏 0 原文