[PHPプロ!] GDライブラリを使わない棒グラフのサンプル

AnyExample.comにてPHPを使ってHTML/CSSベースの棒グラフを生成する関数のサンプルが掲載されています。

　AnyExample.comにてPHPを使ってHTML/CSSベースの棒グラフを生成する関数のサンプルが掲載されています。

　このサンプルの関数で生成されるグラフは、libgdといったライブラリを必要とせずPHP4またはPHP5以上でCSSをサポートしているブラウザがあれば生成表示することが出来ます。

　グラフを生成するサンプル関数のコードですが以下のようになっています。

<?php 
function ae_bar_html(&$values, $height=400, $color='black', $width='')
{
    $max = -1;
    
    foreach($values as $k=>$v)
        if (abs($v) > $max)
            $max = abs($v);
    
    if ($max != 0)
        $kf = $height / $max;
    else
        $kf = 0;
    
    if ($width != '')
        $width = "width: {$width}px; ";
 
    $out = "<tr style='vertical-align: bottom;'>";    
    foreach($values as $k=>$v)
    {
        $bar_h = abs(round($v*$kf));
        $out .= "<td style='{$width}padding-top: 0; margin-top: 0;";
        $out .= " height: {$height}px; border-bottom:"
                . " {$bar_h}px solid {$color}; text-align: center;'>";
        $out .= "{$v}</td>";
    }
    $out .= '</tr>';
    
    
    $out .= "<tr>";    
 
    foreach($values as $k=>$v)
        $out .= "<td style='text-align: center'>{$k}</td>";
        
    $out .= "</tr>";
    return $out;
}
 
?>

　この関数の使い方は以下のようになります。

<?php
 
// データを読み込む
// 配列に値をセット
// サンプルは日付 ＝＞ 訪問者数 
$visitors = array('1.1.2007'=>450, '1.2.2007'=>420, 
                  '1.3.2007'=>440, '1.4.2007'=>430,
                  '1.5.2007'=>421, '1.6.2007'=>318,
                  '1.7.2007'=>234);
?> 
<table> 
<?php
echo ae_bar_html($visitors, '300', 'red', 100);
?> 
</table>

　このサンプルae_bar_html関数には引数が四つあり、第一引数はグラフの値と項目名になる配列、第二引数はグラフの最大値でデフォルトは400px、第三引数は色でデフォルトは黒、第四引数は幅でデフォルトは自動、となっています。

　また、このae_bar_html関数が出力するHTMLではインラインCSSを使って装飾を行っています。このやり方があまり好まないという方のためにもう一つのサンプル関数が掲載されています。

<?php 
function ae_bar_css(&$values, $height=400, $css_prefix='')
{
    $max = -1;
 
    foreach($values as $k=>$v)
        if (abs($v) > $max)
            $max = abs($v);
    
    if ($max != 0)
        $kf = $height / $max;
    else
        $kf = 0;
 
    $out = "<tr class='{$css_prefix}barvrow'>";    
    foreach($values as $k=>$v)
    {
        $bar_h = abs(round($v*$kf));
        $out .= "<td style='border-bottom-width: {$bar_h}px'>{$v}</td>";
    }
    $out .= '</tr>';
    
    
    $out .= "<tr class='{$css_prefix}bartrow'>";    
 
    foreach($values as $k=>$v)
        $out .= "<td>{$k}</td>";
        
    $out .= "</tr>";
    return $out;
}
 
?>

　このae_bar_css関数とよばれるサンプルではインラインCSSを使用していないので、自分好みで装飾を行うことが出来ます。また基本的なCSSも以下のように紹介されています。

table.chart tr.barvrow td 
{ 
    width: 40px;
    height: 400px; 
    vertical-align: bottom;
    border-bottom-color: red;
    border-bottom-style: solid;
    text-align: center; 
}
table.chart tr.bartrow td 
{
    text-align: center 
}

　興味のある方は参考にしてはいかがでしょうか。（PHPプロ！）

関連リンク

• Bar chart HTML generator

関連ニュース

• GDライブラリで棒チャートを作成するチュートリアル

転載元

　PHPプロ！：最新のPHPニュース