我怎样才能创建这样的图表..
<?= format_size($this->space_used); ?> out of <?= format_size($this->total_space); ?>
问问题
3462 次
7 回答
3
你可以用几个带有背景颜色和边框的 div 来做到这一点。
于 2010-07-16T19:19:01.767 回答
2
首先，那不是条形图，它是一个进度条。
就实现这一点而言，我更喜欢使用 JavaScript 来进行实际渲染。例如，看看jQuery UI 进度条。
否则，由于这似乎是静态数据，您可以在 PHP 脚本中计算百分比，然后即时生成图像或从一组预定义图像中选择（例如：progress_10_pct、progress_20_pct 等）。或者正如其他人所提到的，只需使用一些 HTML/CSS 标记来呈现栏的外观 - 选择取决于您。
于 2010-07-16T19:22:28.123 回答
2
示例 html：
<html>
<head>
<style>
.container
{
width: 200px;
height: 50px;
border-style: solid;
border-width: 1px;
}
.meter
{
width: 20%;
height: 100%;
background-color: rgb(0, 255, 0);
}
</style>
</head>
<body>
<div class="container">
<div class="meter">
 
</div>
</div>
</body>
</html>
替代文字 http://grab.by/grabs/3c015b3e6d6839827d2700aa1ed33ad4.png
当然，这只适用于它的静态数据，如果它是动态的，那么你需要一些 javascript，或者使用上面提到的 jQuery 插件，或者滚动你自己的。
于 2010-07-16T19:24:40.007 回答
1
如果你真的想使用 PHP，你可以使用 gd 库——看看这个例子。
否则我建议只使用几个 div -
<div class="bar_container">
<div class="bar" style="width: <?= $percentage ?>%;"> </div>
</div>
于 2010-07-16T19:29:57.953 回答
0
您可以使用 jQuery 进度条轻松完成此操作http://jqueryui.com/demos/progressbar/
于 2010-07-16T19:21:00.267 回答
0
对于进度条，有一个包含一行两列的表格。将宽度调整为面积的百分比。
顺便说一句，我们使用OpenFlashChart。它允许您创建条形/饼形/线条/分散等，并且非常易于使用。
于 2010-07-16T19:23:46.217 回答
0
完全不在我的脑海中，所以请注意购买者...
<head>
...
<style type="text/css">
#progressbar {
display:inline-block;
color:gray;
width:50%;
}
#progressbar div {
margin:0;
}
#progressbar > div {
width:100%;
border:1px solid #aaa;
}
#progressbar > div > div{
background-color:green;
width:<?php echo sprintf("%.0f", $u/$t); ?>%;
height:20px;
}
</style>
</head>
...
Disk Space Usage <div id="progressbar"><?php echo "{$u} MB / {$t} MB"; ?><br><div></div></div>
于 2010-07-16T19:29:27.933 回答