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();//表示 ?>
各メソッドに使う引数の型
[]は省略可
- 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のソートが行われます。