グラフ作成ライブラリの利用

目次

クラスの利用（オブジェクト指向プログラミング）
最初の例：XYプロット
タイトルにかな漢字をいれる
その他の例を試す
作成されたグラフをhtmlページ中の画像として用いる
練習
[課題7] 水質データのグラフ表示にチャレンジ
ステップ１
ステップ２
レーダーチャートを書くプログラムRadarChart.phpの例
実行例::

複雑な処理を行うためには，一から自分でプログラムをするのではなく，定型的な処理を行うパッケージ（プログラム作成の場合はライブラリと呼ぶ）を利用する方法がよくとられる．あるいは，みずからライブラリを作成することもよくある．その際に，オブジェクト指向プログラムの技法は役立つ．

ここでは，オープンソースのグラフ作成ライブラリであるJpGraph1を使ってみる．

アシアル（JpGraphの日本代理店）が提供している日本語のマニュアル にそって機能を簡単に説明し，水質データのグラフを作成する演習をしてみる．

ここでは、コミュニティ版JpGraphを使う。

クラスの利用（オブジェクト指向プログラミング）

関数と変数の集合体の定義をクラスと呼ぶ。動作するプログラムでクラスで定義された「もの」を利用する。そのような方式のプログラム流儀を「オブジェクト指向プログラム」と呼ぶ。JpGraphはいくつかのクラスの集合体である。

オブジェクト指向プログラムの考え方の基本的な事柄は次の節の冒頭に書いてあるので、授業では、それを用いて説明する。

最初の例：XYプロット

マニュアルの７ 直角の XY プロットを使用する から見ていこう．

7.1節にもっとも簡単なプログラム例がある．

タイトルにかな漢字をいれる

次のようにそれぞれのオブジェクトに対するフォント指定をFF_GOTHICかFF_MINCHOに指定するとかな漢字が表示できる．

<?php
// 図作成サンプルプログラム
set_include_path("/home/lab/toyoki/share/php/jpgraph");
include ("jpgraph.php");               // 上記ディレクトリにあるjpgraph.phpを読み込む
include ("jpgraph_line.php");

$ydata = array(11,3,8,12,5,1,9,13,5,7);  //y軸方向の数値データ

// Create the graph. These two calls are always required
$graph = new Graph(300,200,"auto");               // Graphというクラスのオブジェクト$graphを生成
$graph->SetScale("textlin");                      // 以下Graphクラスののマニュアルを参照しながら，各種属性を設定
$graph->img->SetMargin(50,90,40,50);
$graph->xaxis->SetFont(FF_FONT1,FS_BOLD);
$graph->title->SetFont(FF_GOTHIC, FS_NORMAL, 16); //かな漢字フォント指定
$graph->title->Set("グラフのサンプル");           //タイトルにかな漢字

// Create the linear plot
$lineplot=new LinePlot($ydata);
$graph->legend->SetFont(FF_GOTHIC, FS_NORMAL, 16); //かな漢字フォント指定
$lineplot->SetLegend("テスト１");                  //凡例にかな漢字
$lineplot->SetColor("blue");


// Add the plot to the graph
$graph->Add($lineplot);

// Display the graph
$graph->Stroke();
?>

その他の例を試す

マニュアルに載っているサンプルは，冒頭のJpGraphライブラリ読込みの部分を

set_include_path("/home/lab/toyoki/share/php/jpgraph");
include ("jpgraph.php");
include ("jpgraph_line.php");  //includeするphpファイル名はサンプルによる
のように書き換えれば実行できる．

ヒストグラム，円グラフ，レーダーチャート，パイ型円グラフなどが書ける．

作成されたグラフをhtmlページ中の画像として用いる

JpGraphを含むスクリプトで作成した画像をhtml文に組み込むには，

  <body>
      .....
  <img src="jpgraph_example.php">
      .....
  </body>
のように，画像のファイル指定の部分にjpgraphを含むスクリプトを指定すればよい．

練習

<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.01 traditional//en">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
</head>
<body>
<center>
  <h1>JpGraph利用テスト</h1>
  <img src="jpgraph_example.php">
  <br>
  これはJpGraphライブラリを用いたテストです。
</center>
</body>
</html>

[課題7] 水質データのグラフ表示にチャレンジ

課題6で作成した表形式表示の右欄に，「レーダーチャート表示」というボタンをつけ，必要な数値をグラフ表示用のPHPスクリプトに送って，グラフ表示処理をするようなプログラムをつくろう．

ステップ１

表のデータから，COD, PO4-P, NH4-N, NO3の数値をグラフ表示のスクリプトに送信出来るようにしよう．(下の「実行例」参照)

     print_r($_POST);

だけでよい．

送信がうまくいっているかどうかを確かめるのをステップ１とする． （1/13までに，考えたところまでを送信すること．）

(表のNO3とあるのはNO3-N(NO3として存在するNの濃度)のことだと理解してください．POST, GET変数を渡すとき,変数名は独自に設定してよいが，ここのサンプルプログラムでは，NO3とNO3-Nが紛らわしいものが多い．注意すること.)

送信元（表表示）スクリプトの実行例

ステップ２

上記のPOST変数で受け取ったデータを，$cod, $po4p, $nh4n, $no3nという変数に代入した後，グラフのイメージを作成するスクリプトに送ってイメージを作成させる．

イメージ作成スクリプト名をRadarChart.phpとすれば，

  　echo '<img src="RadarChart.php?COD=' .  $cod . '&PO4-P=' . $po4p
        . '&NO3-N=' . $no3n . '&NH4-N=' .$nh4n . '">';
のようにGET型でデータを渡せばよい．

[締切 1/25]

レーダーチャートを書くプログラムRadarChart.phpの例
<?php
 //jpgraphライブラリの読み込み
 set_include_path("/home/lab/toyoki/share/php/jpgraph");
 require_once("jpgraph.php");
 require_once("jpgraph_radar.php");

 //グラフ表示のランクごとの色 （色分けはなくてもよい）
 $rankCol[0] = "#c0ffff";
 $rankCol[1] = "#40ffe0";
 $rankCol[3] = "#80ff80";
 $rankCol[2] = "#e0e040";
 $rankCol[4] = "#c0c080";
 $rankCol[5] = "#804040";

///////GET型変数をうけとる．ここが大事//
//エラー上つからないときは、以下のifブロックをコメントにして実行してみるのも一案//
 if(!is_numeric($_GET['COD']) || !is_numeric($_GET['PO4-P']) ||
   !is_numeric($_GET['NO3-N']) || !is_numeric($_GET['NH4-N'])) {
    print_r($_GET); die("format error!");
 }

 // データ
 $max_scale = round($_GET['COD']/4)*8.0;
 if($max_scale==0) $max_scale = 8.0;

 $po4_unit=1.0/32.0;
 $no3_unit=0.5;
 $nh4_unit=1.6/32.0;
 $aryData  = array($_GET['COD'],
                  $_GET['NH4-N']/$nh4_unit,
                  $_GET['NO3-N']/$no3_unit,
                  $_GET['PO4-P']/$po4_unit);

 // 軸タイトル
 $aryTitle = array("COD". sprintf("\n%.1f",$_GET['COD']),
                  "アンモニア性\n窒素". sprintf("\n%.2f",$_GET['NH4-N']),
                  "硝酸性窒素". sprintf(" %.1f",$_GET['NO3-N']),
                  "リン酸態\nリン". sprintf("\n%.3f",$_GET['PO4-P']));

 // レーダーグラフの初期化
 $chart = new RadarGraph(320,220,"auto");
 $chart->SetScale('lin',0,$max_scale);
 $chart->SetPlotSize(0.55);
 // 背景の設定
 $chart->SetColor("lightyellow");
 $chart->SetShadow();

 // グラフの描画位置
 $chart->SetCenter(0.5,0.55);

 // 軸の設定
 $chart->axis->SetFont(FF_GOTHIC,FS_NORMAL);
 $chart->axis->title->SetFont(FF_GOTHIC,FS_NORMAL);
 $chart->axis->SetColor("#207870");

 // グリッドの設定
 $chart->grid->Show();
 $chart->ShowMinorTickmarks(true);
 $chart->grid->SetColor("gray");
 $chart->grid->SetLineStyle("dashed");

 // タイトルの設定
 $chart->title->Set(mb_convert_encoding($_GET['title'],"UTF-8","auto"));
 $chart->title->SetFont(FF_GOTHIC,FS_NORMAL, 13);
 $chart->title->SetColor("#406898");
 $chart->SetTitles($aryTitle);

 // プロットデータの作成
 $plot = new RadarPlot($aryData);
 $colIdx = floor($_GET['COD']/4.0);
 $colIdx = $colIdx>5? 5:$colIdx;
 $plot->SetColor("#ff5588",$rankCol[$colIdx]); //COD濃度によって色を変える
 $plot->SetLineWeight(2);

 // プロットデータの追加
 $chart->Add($plot);

 // グラフの描画
 $chart->Stroke();
?>


       http://www.ccn.yamanashi.ac.jp/~t11jj000/(ディレクトリ名)/RadarChart.php?COD=6&PO4-P=0.03&NO3-N=2&NH4-N=0.16
のように，直接RadarChart.phpにGET型の変数・値をつけてアクセスし，結果を確認してみる．（ソース表示をしてみると何かつかめるはず．）

実行例::

この例では，１番目と2番目のファイルの列数が異なるために2番目 のファイルでは正しく表示されない(simple_sample.csvのように列 が想定とは異なる場合もある）．CODなどそれぞれの量が表れる列 番号が固定されていることを想定したプログラムであるためである。

上記の不具合を解消した例
最初の項目名から，CODなどの要素が表れる列数を検出するようにしたプログラム例

総合演習課題は、課題７の改良なので、連続して、それを行うこと。

最終回（1/30）は、最終的に作成したプログラムについて、各自と面談形式で理解度をテストする。

総合演習のページへ

脚注

1. JpGraphは，スウェーデンのAditus Consultingが作成し，オープンソースPHPライブラリとして公開している．（ただし，商用利用に対しては有料である．）ライブラリは日本語にも対応しており，商用利用，日本語でのサポートは，（株）アシアルが行っている．

TOYOKI Hiroyasu
Updated: 2013-01-09 		Home / ソフトウェア開発及び演習Home