INDEX； 1.アプリケーションの構成 2.システム構成（環境） 3.Perl、DG等のインストール｜インストール詳細 4.グラフの作成方法 5.出力画面等（結果） 6.APダウンロード（表2テスト環境全ファイル） 7.GD-Graphグラフサンプル（全３７例） 8.GD-Graphマニュアル 変更履歴
|
TARGET； ・GD::Graphでグラフを描く ・グラフのタイトル等を日本語で表示する ・グラフのY軸の目盛数字を\付き,(カンマ）区切りに編集する ・グラフの軸のデータマーク（▲/●等のマーク）を表示する ・グラフをGIF画像で表示する ・グラフをEXCELに出力する ・OSはWindows |
本ページは、OS Windows IIS + Active Perl5.8をベースに書いています。
１．アプリケージョンの構成
サンプルアプリケージョンの構成は、以下のとおりです。
|
|
（説明）
（１）*1 入力データ
・年月(MByyyy,MBmm)
・営業地域名(MBarea)
・処理区分（MBproc=list)
※直接、売上管理表を起動するURL；
http://127.0.0.1/uriage/uriage-area.asp?MBarea=新宿&MByyyy=2004&MBmm=11&MBproc=list（ローカルサーバ）
（２）*2 グラフの表示方法例(uriage-srea.asp内）
<img src='graph-tantosya.cgi?gext="&Gext&"&graf="&・・・'>
※実例;
graph-tantosya.cgi?gext=png&graf=./tmp/1/PJGRAPH-1-200411&mant=新宿テーブル&dbt=担当者別売上状況&aid=1&
aname=新宿&Gm=6,7,8,9,10,11,END&Gy=2004,2004,2004,2004,2004,2004,END
（３）*3 EXCELの作成方法例(uriage-srea.asp内）
表1 EXCELの作成方法例(Web形式）
sub excelout()
'ファイル名=担当者別売上管理表-mm月分-20041122.xls
ymd = Date()
tmp = Split(ymd,"/")
ymd = tmp(0) & tmp(1) & tmp(2) 'yymmdd
outfilename = Reportname & "-" & MBmm & "月分-" & ymd & ".xls"
'Response.Buffer=true
Response.ContentType = "application/vnd.ms-excel"
'Response.AddHeader "Content-Disposition","inline; filename=" & outfilename
Response.AddHeader "Content-Disposition","attachment; filename=" & outfilename
response.write "<HTML><HEAD></HEAD><meta http-equiv=""Content-Type"" content=""text/html; charset=Shift_JIS""><BODY>"&chr(13)
response.write strall '出力内容はstrallにある
if uriagetotal <> 0 then 'グラフをEXCEL上にハイパーリンクする
graftmp=graphpath & Grafile & "."& Gext
response.write "<br><img src='" & graftmp & "'>"
end if
response.write "</BODY></HTML>"
End sub
※<meta http-equiv=""Content-Type"" content=""text/html; charset=Shift_JIS"">を入れないと、文字化けが起きる。
※EXCELは、Web形式で出力されます。必要に応じローカルでブック形式に変換します。
（４）*4 データベース
・種類：マイクロソフトアクセスMDB
・ドライバー：Microsoft Access Driver(*.mdb)
・DNS名：uriagedb（任意）
・DBファイル名：売上管理台帳.mdb（任意）
・使用テーブル：担当者別売上状況、営業統括地域テーブル、新宿テーブル
（５）サンプルアプリケーション売上管理表ファイル構成（図1の｢TOPメニュー｣のソースはありません）
表2 ファイル構成 [ ]：フォルダ (AP)：作成アプリケーション
[uriage] （テスト環境パス C:\Inetpub\wwwroot\uriage)
+-[DB]
+---売上管理台帳.mdb
+-[img]
+-[Jcode] ←Jdode.pm 右参照
+-[tmp]
+-[1] ←1は、新宿の地域コード。ここにグラフファイルを保存します。
+---PJGRAPH-1-200411.gif
+---PJGRAPH-1-200411.png
+-graph-tantosya.cgi ←グラフ作成CGI(AP)
+-graph-test.cgi ←テスト用グラフ作成CGI(AP)
+-graphSave.pl ←グラフファイル保存ライブラリ(AP)
+-howtograph.html ←本HTML(AP)
+-perlgd-install.html ←インストール方法HTML(AP)
+-uriage-area.asp ←売上管理表作成ASP(AP)
+-rgb.txt ←ユーザ定義カラー名（752色）（GD::Graph仕様）
Jcode.pm
+-[Jcode]
+-[Jcode]
+-[t]
+-[Unicode]
+-Jcode.pm
+-など
２．システム構成（確認環境）
表3 システム構成
OS/サーバー ・Windows2003 Server
・WindowsXP Pro+IIS5
Windows Vista+IISでは、未確認です。
必要ソフト
(サーバ） ・Active Perl(5.8.X)
・GD(2.39)
・GD::Graph(1.44)
・GD::TextUtil(0.86)
・Jcode.pm(2.07)*1
()内の数字はバージョン
*1：私用ライブラリーで使用
クライアント ・InternetExplorler5.5以上
・Microsoft Access 2000以上（DB作成用）
※ GD(2.39)：
Author：LDS [ Lincoln D. Stein ]
Link：http://cpan.uwinnipeg.ca/module/GD
※ GD::Graph(1.44)、GDTextUtil(0.86)：
Author：MVERB [ Martien Verbruggen ]
Link：http://cpan.uwinnipeg.ca/module/GD::Graph
３．Perl、DG等のインストール（For Windows)
Active Perl(5.8.8)のバージョンにより、インストール（ダウンロード）するPerlモジュールやライブラリ
のGDやGD::Graphのバージョンが必然的に決まってきます。それぞれのバージョンは、表3のとおりです。
いわゆる"Perl 5.8 repository"（リポジトリ：収納庫の意）の GDやGD::Graphをインストールします。
PerlモジュールやライブラリをWindowsにインストールする場合、コマンドプロンプトを起動し、
PPM(Perl Package Manager)で行ないます。Perl5.8以降PPMがGUIになリましたが、従来のPPMコマンドでも
操作可能です。
インストール方法として、「オンラインで行なう場合」と「Perlモジュールをダウンロードした後ローカルで場合」
がありますが、「オンラインで行なう場合」は、PCがProxy経由の場合は、制約が出てきます。
私の場合は、Perlモジュールをダウンロードした後ローカルで行ないました。
Perlモジュール等をインストールする場合、PPM形式のファイルをダウンロードする必要があります。
GD-Graphでグラフを作成するためには、GD、GD-Graph本体およびText Utility For GD-Graphをインストールします。
インストールは、GD→Text Utility For GD-Graph→GD-Graph本体の順に行います。
GDの場合、
http://cpan.uwinnipeg.ca/module/GDページの「Win32 PPM packages for "GD"」欄の
→ www.bribes.org Perl 5.8 repositoryをクリックし、このページ（注）のつぎのファイルをダウンロードします。
・GD-2.39-PPM58.tar.gz （PPM パッケージファイル。Perl5.8対応。）
・GD.ppd （ppdファイル。右クリックで「対象をファイルに保存」でダウンロードします。）
GD-Graphの場合、GD-Graph本体(GD::Graph)とText Utility For GD-Graph(GD::TextUtil)をインストールします。
（１）GD::Graph
http://cpan.uwinnipeg.ca/module/GD::Graphページの「Win32 PPM packages for "GD"」欄の
→ www.bribes.org Perl 5.8 repository をクリックし、このページ（注）のつぎのファイルをダウンロードします。
・GDGraph-1.44-PPM58.tar.gz （PPM パッケージファイル。Perl5.8対応。）
・GDGraph.ppd （ppdファイル。右クリックで「対象をファイルに保存」でダウンロードします。）
（２）GD::TextUtil
http://cpan.uwinnipeg.ca/dist/GDTextUtilページの「Win32 PPM packages for "GD"」欄の
→ www.bribes.org Perl 5.8 repository をクリックし、このページ（注）のつぎのファイルをダウンロードします。
・GDTextUtil-0.86-PPM58.tar.gz （PPM パッケージファイル。Perl5.8対応。）
・GDTextUtil.ppd （ppdファイル。右クリックで「対象をファイルに保存」でダウンロードします。）
（注）GD、GD-Graphとも同じサイトの同じページ（http://www.bribes.org/perl/ppm/）です（下）。
>インストール方法詳細（Perl5.8、GD、GD::Graph、Jcode.pmのインストール方法)
| インストールの順番 | モジュール名 | ダウンロードするためのサイトのページ | 備考 |
| 1 | GD | ・http://cpan.uwinnipeg.ca/module/GD | 上の注記のhttp://www.bribes.org/perl/ppm/ に辿り着きます。PPMとPPDをダウンロードします。 |
| 2 | GDTextUtil | ・http://cpan.uwinnipeg.ca/dist/GDTextUtil | 同上 |
| 3 | GDGraph | ・http://cpan.uwinnipeg.ca/module/GD::Graph | 同上 |
| インストールなし | Jcode.pm | ・http://cpan.uwinnipeg.ca/module/Jcode | Jcode本体を直接ダウンロードします。私用ライブラリーとして使用します。 |
４．グラフの作成方法
GD::Graphモジュールを用いたグラフの作成方法について、テスト用アプリケーション(graph-test.cgi)で説明します。 グラフの作成の作成に当り、河馬屋二千年堂のGD::Graphモジュールの日本翻訳を参考及び一部引用させて頂きました。 このソースの出力グラフは、ここを参照。 (作成方法概要） （１）作成するグラフのクラスを定義します ・例． use GD::Graph::linespoints; #折れ線＋点グラフ（例１，２共通） use GD::Graph::Data; #データセットのカプセル化(例２の場合） （２）X軸の項目名とデータセットの無名配列（配列の配列）を作成します ・例１.一般的な使用（無名配列） @data = ( #※データセット変数名の使い方に注意 ["4","5","6","7","",""], #X軸の項目名(4,5,6,7,8,9月） [255000,260000,255000,230000,225000,330000], #Aさんの過去6ヶ月の売り上げデータ [125000,126000,125000,123000,122500,123000], #Bさんの過去6ヶ月の売り上げデータ [95000,86000,50004,13000,92500,63000] #Cさんの過去6ヶ月の売り上げデータ ); ・例２.GD::Graph::Dataオブジェクト使用（無名配列を更に[ ]で括る） $data = GD::Graph::Data->new ([ #※データセット変数名の使い方に注意 ["4","5","6","7","",""], #X軸の項目名(4,5,6,7,8,9月） [255000,260000,255000,230000,225000,330000], #Aさんの過去6ヶ月の売り上げデータ [125000,126000,125000,123000,122500,123000], #Bさんの過去6ヶ月の売り上げデータ [95000,86000,50004,13000,92500,63000] #Cさんの過去6ヶ月の売り上げデータ ] ); （３）作りたいグラフのGD::Graphオブジェクトを作成します ・例 $graph = new GD::Graph::linespoints(400,300); #書き方１。（）内は、グラフキャンバスの大きさ。width×height graph = GD::Graph::linespoints -> new(400,300); #書き方２。（）内は、グラフキャンバスの大きさ。width×height （４）グラフオプションを指定します ・例 $graph->set( x_label => "X ラベル", #X軸ラベルの文字 y_label => "Y ラベル", #Y軸ラベルの文字 y_max_value => 350000, #Y軸に表示される最大値 y_min_value => 0, #Y軸に表示される最小値 y_tick_number => 7, #Y軸の数 title => "タイトル", #表題 ); （５）グラフを出力（プロット）します ・例１（（２）例１の場合）※データセット変数名の使い方に注意 my $gra=$graph->plot(\@data); ・例２（（２）例２の場合）※データセット変数名の使い方に注意 my $gra=$graph->plot($data); （６）ファイルに保存します（コード：SJIS） 下表4-テスト用アプリケーションソースの「*6グラフ出力」参照。
1 #! /usr/local/bin/perl
2
3 #テスト用折れ線グラフ-2004.12.16,2008.7.12(Perl5.8対応）
4 chdir("C:\\Inetpub\\wwwroot\\uriage"); #カレントディレクトリ指定（このCGIのある場所）（Windows IISの場合、必須）
5 require "graphSave.pl"; #グラフ画像ファイル保存ルーチン
6 use lib 'C:/Inetpub/wwwroot/uriage/Jcode'; #Jcode.pmライブラリ格納フォルダ Jcode
7 use Jcode; #jcode.pl PM版。UTF-8コード変換に使用。（注）JcodeのJは大文字。
8 use GD::Graph::linespoints; #折れ線グラフ+点グラフを作成する場合。その他棒グラフ（bars)、点で表すグラフ（points）、円グラフ（pie）等*0
9 #use GD::Graph::mixed; #グラフを組み合わせた混合グラフ（円グラフ以外の組み合わせ）*0
10 use GD::Graph::colour; #色の操作ルーチン
11 use GD::Text; #GDのために用いるテキストユーティリティ*7
12 use GD::Text::Align; #GD::Textのサブルーチン。位置づけられた文字列の描写。
13 $gd_text=GD::Text->new() or die GD::Text::error(); #GD::Textオブジェクト定義*7
14 $gd_text->font_path('C:/WINDOWS/FONTS'); #ラベル文字等用のTrue Fontのパス。最後に/は付けない。*7
15 GD::Graph::colour::read_rgb("./rgb.txt"); #RBGユーザ定義ファイル（752色）の読み込み。デフォルトは限られた数の色（29色）です。
16 #グラフに書くテキスト文字の定義。※日本語を扱う場合、UTF-8への変換が必要です。変換しないと文字化けします！
17 $graphtitle="担当者別売上推移（月別）"; #グラフタイトル
18 Jcode::convert(\$graphtitle,'utf8',"sjis"); #グラフタイトルのUTF-8への変換
19 $tuki="月"; #X軸ラベル文字
20 Jcode::convert(\$tuki,'utf8',"sjis"); #X軸ラベル文字のUTF-8への変換
21 $en='売上金額（円）'; #Y軸ラベル文字
22 Jcode::convert(\$en,'utf8',"sjis"); #Y軸ラベル文字のUTF-8への変換
23 #データセット（表示データ）の定義（スタティックにとる場合）
24 #「X軸の項目名」と「データセット（グラフデータ）」が入った配列の配列（無名配列）を作成します。
25 #各配列のサイズは全て同じにします。
26 undef @data; #データセット用配列（無名配列にする）。
27 @data=( #※実際は、データベースを読み、動的に無名配列を作成します！
28 ["4$tuki","5$tuki","6$tuki","7$tuki","8$tuki","9$tuki"], #X軸目盛の項目名(4,5,6,7,8,9月）※日本語表！(2005.1.13)
29 [255000,260000,255000,230000,225000,330000], #Aさんの過去6ヶ月の売り上げデータ。売上金額（円）。
30 [125000,126000,125000,123000,122500,123000], #Bさんの過去6ヶ月の売り上げデータ。売上金額（円）。
31 [95000,86000,50004,13000,92500,63000] #Cさんの過去6ヶ月の売り上げデータ。売上金額（円）。
32 );
33 my @hanrei =("A","B","C"); #凡例（担当者名：Aさん,Bさん,Cさん)。日本語の表示可能。
34 $graph=new GD::Graph::linespoints(600,400); #GD::Graphグラフオブジェクトの定義*0。折れ線グラフ＋点グラフ(2005.1.13修正）
35 #（）内の数字は、グラフのキャンパスの幅(width)と高さheight)(pix値)。
36 #オプション設定
37 $graph->set_x_label_font('MSGOTHIC.ttc',18); #X軸ラベルフォントのTrue Fontファイル名のパスとFontの大きさ。先頭に/を付けない。*7
38 $graph->set_y_label_font('MSGOTHIC.ttc',18); #Y軸ラベルフォントのTrue Fontファイル名のパスとFontの大きさ。※16pix以下にすると表示がおかしくなる！
39 $graph->set_x_axis_font('MSGOTHIC.ttc', 18); #X軸の値のフォント（目盛）のTrue Fontファイル名のパスとFontの大きさ
40 $graph->set_y_axis_font('MSGOTHIC.ttc', 18); #Y軸の値のフォント（目盛）のTrue Fontファイル名のパスとFontの大きさ
41 $graph->set_title_font('MSGOTHIC.ttc',18); #title表題のフォントのTrue Fontファイル名のパスとFontの大きさ
42 $graph->set_legend_font('MSGOTHIC.ttc',18); #凡例のフォントのTrue Fontファイル名のパスとFontの大きさ
43 $graph->set_text_clr(green); #title,label,axis label/表題、ラベル、軸ラベルの色(凡例以外）
44 $graph->set_legend(@hanrei); #凡例の設定
45 $graph->set(
46 # dclrs =>[ qw(blue red green) ], #棒、線、点（マーカー*5）、円グラフ扇形の色*1。@dataデータセットのデータの順に定義します。
47 # borderclrs =>[ qw(blue red green) ], #棒グラフ境界線の色
48 #two_axes =>1, #２つのデータセット（混合グラフ）を使用の場合（目盛）:1
49 #types =>['linespoints','linespoints','linespoints'], #混合グラフグラフの種類lines:折れ線*2。
|
1: 塗りつぶされた四角（filled square） 2: 四角（open square） 3: 十字（horizontal cross）
4: 対角線の十字(diagnal cross) 5: 塗りつぶされた菱形（filled diamond） 6: 菱形（open diamond）
7: 塗りつぶされた丸（filled circle） 8: 丸（open circle） 9:横線（horizontal line)
10:縦線（virtical line) （図2参照）
デフォルトは、 [1,2,3,4,5,6,7,8] です。
$graph->set( markers => [1,2,3,4,5,6,7,8] ) データが9以上あった場合は、1,2,・・・と循環します。５．出力画面等（結果）
この画面が表示されたときに、｢EXCEL｣ボタンをクリックするとExcelファイル（Webページ形式）をダウンロードします。
|
６．APダウンロード（表2テスト環境全ファイル）
●ダウンロード(Free!) >Perlでグラフを作成するサンプルアプリケージョン（Perl、GD、GDGraphは含まれていせん） Jcode.pmは、私用ライブラリとして同梱されています。 ●起動方法 （URL：ローカルサーバの場合) http://127.0.0.1/uriage/uriage-area.asp?MBarea=新宿&MByyyy=2004&MBmm=10&MBproc=list ・MBarea：新宿 （新宿以外のデータはありません） ・MByyyy：2004 （2004年度以外のデータはありません） ・MBmm：10 （10月、11月のデータがあります） ・MBproc：list （list固定） ●留意事項 走行環境により以下のとおりソースを変更して下さい。 （１）graph-tantosya.cgi（グラフ作成CGI) ①27行目と173行目（カレントディレクトリ指定（IISの場合）） 表4 テスト用アプリケーションソースの4行目を参照。 ②30行目（Jcode.pmライブラリ格納フォルダの場所） 表4 テスト用アプリケーションソースの6行目を参照。 ③182行目（ラベル文字等用のTrue Fontのパス） 表4 テスト用アプリケーションソースの14行目を参照。 （２）uriage-area.asp（売上管理表作成ASP） ①48行目（pngまたはgifに変更する） 48 Gext="png" 'サーバ保存グラフファイルの拡張子（.なし） ②73行目（グラフファイル保存用パス） 73 graphpath="http://127.0.0.1/uriage/tmp" 'グラフパス 環境により修正必須********* （注）tmpフォルダ内には、1（半角1）のフォルダが必要です。1：新宿の地域コード。７．GD-Graphグラフサンプル（３７例）
このサンプルグラフは、GD-GraphのダウンロードファイルGDGraph-1.43.tar.gzに同梱されているサンプルAPを 走行（Windows）し作成したものです。したがい、グラフのタイトルや軸ラベルは英語です。 サンプルグラフ名をクリックすると、グラフ、説明とソースコード(*.pl)がご覧になれます。
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
８．GD-Graphマニュアル
次のサイトを参照ください。
|
|
|
（変更履歴）
| 2005.07.22 |
・GDの2．25へのバージョンアップによる追記 | |
| 2005.02.12 |
・グラフサンプル全37例に新たに説明を追記しました | |
| 2005.01.17 |
・グラフサンプル全37例追加 ・グラフ作成概要追記 | |
| 2005.01.13 |
GD::Graphの使用クラスを実態に合わせ、mixed（混合）→linespoints（折れ線+点グラフ）に変更 （mixedは、pie円グラフ以外を包含しているので動作は問題ない） ・GD::Graph::mixed;をコメント化し、GD::Graph::linespoint;を追加 ・$graph=new GD::Graph::linespoints(600,400); mixed→linespointsに変更 ・混合グラフ関係、types, box_axis をコメント化 ・関連コメントの削除マーク ・点グラフのマーカーについて追記 ・X軸の項目名が日本語表示出来なかったのをできるよう修正（バグ） | |
| 2004.12.24 | 初版クリスマス版 |
最終更新日：2009.12.1