1

このようなグラフを作成するにはどうすればよいですか。 代替テキスト

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

7 に答える 7

3

これは、背景色と境界線を使用した2つのdivで実行できます。

于 2010-07-16T19:19:01.767 に答える
2

まず、これは棒グラフではなく、プログレス バーです。

これを実装する限り、私の好みは JavaScript を使用して実際のレンダリングを行うことです。たとえば、jQuery UI Progress Barを見てください。

それ以外の場合、これは静的データのように見えるため、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

もちろん、これは静的データの場合にのみ機能し、動的な場合は、前述のようにjQueryプラグインを使用するか、独自にローリングすることにより、JavaScriptが必要です。

于 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

完全に私の頭のてっぺんから外れているので、emptor に注意してください...

<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 に答える
0

jQuery プログレス バーを使用してこれを簡単に行うことができますhttp://jqueryui.com/demos/progressbar/

于 2010-07-16T19:21:00.267 に答える
0

プログレス バーには、1 行 2 列のテーブルがあります。面積のパーセンテージとして幅を調整します。

ところで、OpenFlashChartを使用します。棒グラフ、円グラフ、折れ線グラフ、散布図などを作成でき、非常に使いやすいです。

于 2010-07-16T19:23:46.217 に答える