2010年8月2日月曜日

OpenFlashChartで折れ線グラフを描く

どうも、俺@週明け仕事中です。

今日はphpの便利なFlashグラフ作成ライブラリOpen Flash Chartを使って折れ線グラフを描く方法をメモします。

.swfファイルの配置などは割愛します。
上記URLから一式ファイルを落として、open-flash-chart.swfをサーバへ置き、クライアント側からはjavascriptで
<script src="swfobject.js" type="text/javascript"></script>
swfobject.embledSWF("open-flash-chart.swf");
のように呼び出すだけです。

では、折れ線グラフ(2本の折れ線)を作るためにサーバ側では
<?php
$chart = new OFC_Chart();

// 1本目
$line = new OFC_Charts_Line();
$line->set_values(array(1,2,3));
$line->set_width(2);
$line->set_colour("#000000");
$chart->add_element($line);

// tool_tipを使う場合
$dot = new OFC_Charts_Line_Dot();
$dot->set_dot_size(3);
$dot->set_halo_size(1);
$dot->set_colour("#000000");
$dot->set_tooltip("ここはツールチップ #val##x_label#");
$line->set_default_dot_style($dot);

/Charts/OFC_Charts_Line.phpに以下のメソッド追加
function set_tooltip($tip) {
$this->tip = $tip;
}
function set_default_dot_style($style) {
$this->{"dot-style"} = $style;
}


// 2本目
$line = new OFC_Charts_Line();
$line->set_values(array(4,5,6));
$line->set_width(2);
$line->set_colour("#000000");
$chart->add_element($line);

// tool_tipを使う場合
$dot = new OFC_Charts_Line_Dot();
$dot->set_dot_size(3);
$dot->set_halo_size(1);
$dot->set_colour("#000000");
$dot->set_tooltip("ここはツールチップ #val##x_label#");
$line->set_default_dot_style($dot);


// Y軸
$y = new OFC_Elements_Axis_Y();
$y->set_range(0,100,10);// Y軸の幅
$y->set_colour("#000000")
$y->set_grid_colour("#cccccc");
$chart->set_y_axis($y);

// X軸
$x_label = new OFC_Elements_Axis_X_Label_Set();
$x_label->set_labels(array("その1", "その2"));
$x_label->set_steps(1);
$x_label->set_colour("#000000");

$x = new OFC_Elements_Axis_X();
$x->set_labels($x_label);
$x->set_colour("#000000");
$x->set_grid_colour("#cccccc");
$x->set_range(0,null,null);

$chart->set_x_axis($x);

print $chart->toPrettyString();
exit;
こんな感じです。

詳細は公式を見てね。

0 件のコメント: