PHPに惚れました

今でも多分惚れてます。

PHPで比率の棒グラフを表示するクラス作ってみた。#2

PEARなどのパッケージにもう便利なものがあるかもしれないけど、練習がてら作ってみた。
IEでも火狐でもレイアウト崩壊はない・・・はず。

途中で心折れてすんごいテキトーになったのが丸見えのソースですね。。

データの比率を示すグラフ表示。

これだけはhead内でCSSを指定して下さい
<style>
.graph {
    border: 1px solid #336666;
    margin-bottom:10px;
    width:auto;
}
</style>
<?php
//連想配列のキーにラベル名、値に数字を指定。
$data = array();
$data['Lv.1〜10'] = 2236;
$data['Lv.11〜20'] = 23566;
$data['Lv.21〜30'] = 9542;
$data['Lv.31〜40'] = 30324;
$data['Lv.41〜50'] = 7950;
$data['Lv.51〜60'] = 477;
$data['Lv.61〜70'] = 29;
$data['Lv.71〜80'] = 7;
$data['Lv.81〜90'] = 5;
$data['Lv.91〜100'] = 2;
$data['MAX'] = 2;

class quick_bar_chart{
	private $right = null;		//外側CSS//
	private $right_dl = null;		//内枠CSS//.
	private $right_dt = null;		//ラベルCSS//.
	private $right_dd = null;		//グラフCSS//.
	private $chart_title = null;	//見出しタイトル
	private $data_html = null;		
	private $e_html = null;

	function __construct($width,$lbl_width,$font_size){		//コンストラクタ
		$this->right = "width:".$width."px;margin-left:auto;margin-right:auto;font-size:".$font_size."px;";
		$this->right_dl ="width:".($width-15)."px;margin-right:auto;margin-left:auto;";
		$this->right_dt ="width:".$lbl_width."px;float:left;text-align:center;"; 
		$this->right_dd ="width:".($width-$lbl_width-20)."px;margin-left:".$lbl_width."px;padding:0px 0px 0px 0px;";
	}

	function get_right(){
		return $this->right;
	}
	function get_right_dl(){
		return $this->right_dl;
	}
	function get_right_dt(){
		return $this->right_dt;
	}
	function get_right_dd(){
		return $this->right_dd;
	}
	function set_title($title){
		$this->chart_title = $title;
	}
	function get_title(){
		return "<h2 style='text-align:left;font-size:9pt;font-family: Tahoma,Arial,sans-serif;margin: 0px 0.3em 0.7em 0px;padding: 0px 1em 1px 1em;border-bottom: dashed 1px #9900FF;color: #333333;letter-spacing: 0.1em;font-weight: bold;'>".$this->chart_title."</h2>";
	}
	
	function setData($data,$round,$sort=""){
		if(!empty($sort)){
			switch($sort){
				case "asort";
					asort($data);
					break;
				case "arsort";
					arsort($data);
					break;
				case "ksort";
					ksort($data);
					break;
				case "krsort";
					krsort($data);
					break;
				default:
			}
		}
	
		$array_sum=array_sum($data);
		$d_html="";
		$d_html .= "<dl style=".$this->get_right_dl.">";
		foreach($data as $key => $val){
			$d_html .= "<dt style=".$this->get_right_dt().">".$key."</dt>";
			$d_html .= "<dd class=\"graph\" style=".$this->get_right_dd().">";
			$d_html .= "<img src='pic/graph.gif' width='".($val/$array_sum*100)."%' height='10'>";
			$d_html .= "<span>".round($val/$array_sum*100,$round)."% (".$val."件)</span>";
			$d_html .= "</dd>";
		}

		$d_html .="</dl>";
		
		$this->data_html = $d_html;
	}
	function getData(){
		return $this->data_html;
	}
	
	function create_html(){
		$c_html .="<div style=".$this->get_right().">";

		$c_html .=$this->get_title();

		$c_html .=$this->getData();
		
		$c_html .="</div>";
		
		$this->e_html = $c_html;
	}
	
	function display(){
		echo $this->e_html;
	}
}
/////設置方法//////
$obj = new quick_bar_chart(310,60);//コンストラクタに全体幅、ラベルの幅を指定(単位px)
$obj->set_title("なんとか");//見出しタイトルを指定
$obj->setData($data,3);//データとして連想配列を指定、%の四捨五入の桁を指定
$obj->create_html();//HTMLを生成
$obj->display();//表示
?>

実行結果
f:id:Xephy:20090214045022p:image

各メソッドに使う引数の型
[]は省略可

  • new quick_bar_chart(int 全体幅,int ラベル幅);
  • set_title(str タイトル名);
  • setData(array() データ,int 四捨五入する桁[,str] ソートの種類を示す文字列);

デザインはnicoDB_statusと同じものをベースに作成。
出来る限りCSSはタグに直接書いてボックスの幅の大きさやラベルの幅も指定可。
その他の幅は中で計算され自動調整。

グラフのバーとして使うgraph.gifは1px×1pxの画像を指定すればOK。
よかったら誰かこれ改良してくだしあw


グラフってPEARとかでもパッケージあるけど結構パラメータ指定とか面倒なんですよね。

だったら自分で簡単なグラフ描画しちゃおうと。
多少の手間、不便さはあるかもしれませんが設置はすごい楽だと思います。

                                                                                                                              • -

ソート付けました。
setData()メソッドの第3引数にasort,arsort,ksort,krsortの、
いずれかの文字列を入れたらsのソートが行われます。