1

我怎样才能创建这样的图表.. 替代文字

<?= format_size($this->space_used); ?> out of <?= format_size($this->total_space); ?>
4

7 回答 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">
&nbsp
</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 ?>%;">&nbsp;</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 回答