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.6.1をベースに書いています。Perl5.8ベースについてはこちらをご覧ください-2008.7.12 。
１．アプリケージョンの構成
サンプルアプリケージョンの構成は、以下のとおりです。
|
|
（説明）
（１）*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
+-[GD]
+---[Graph] ←GD::Graphモジュール。右参照。
+---[samples]（未使用）
+---[t]（未使用）
+---[Text] ←GD::Textモジュール。右参照。
+---CHANGES（未使用）
+---Dustismo.LICENSE（未使用）
+---Dustismo_Sans.ttf（未使用）
+---Graph.pm ←GD::Graphメイン
+---Makefile.PL（未使用）
+---MANIFEST（未使用）
+---README（未使用）
+---rgb.txt ←GD::Graph::colourで用いるユーザ定義カラー
+---Text.pm ←GD::Textメイン
+-img
+-[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)
[Graph] GD::Graphモジュール
+---area.pm
+---axestype.pm
+---bars.pm
+---colour.pm
+---Data.pm
+---Error.pm
+---FAQ.pod
+---hbars.pm
+---lines.pm
+---linespoints.pm
+---mixed.pm
+---pie.pm
+---points.pm
+---utils.pm
[Text] GD::Textモジュール
+---Align.pm
+---Wrap.pm
２．システム構成（環境）
表3 システム構成
OS/サーバー ・Windows2000 Server（本番）
・Windows2000Pro+IIS5（TEST環境）
・Windows98SE+PWS（TEST環境）
Windows XP+IIS5では、未確認です。
必要ソフト
(サーバ） ・Active Perl(5.6.1)
・GD(2.16)
・GD::Graph(1.43) GDTextUtil(0.86)
・jcode.pm(0.87) ()内の数字はバージョン クライアント ・InternetExplorler5.5以上
・Microsoft Access 2000以上（DB作成用）
※ GD(2.16)：
Author：LDS [ Lincoln D. Stein ]
Link：http://cpan.uwinnipeg.ca/module/GD
※ GD::Graph(1.43)、GDTextUtil(0.86)：
Author：MVERB [ Martien Verbruggen ]
Link：http://cpan.uwinnipeg.ca/module/GD::Graph
３．Perl、DG等のインストール
Active Perl(5.6.1)のバージョンにより、インストール（ダウンロード）するPerlモジュールやライブラリ
のGDやGD::Graphのバージョンが必然的に決まってきます。それぞれのバージョンは、表3のとおりです。
いわゆる"Perl 5.6 repository"（リポジトリ：収納庫の意）の GDやGD::Graphをインストールします。
PerlモジュールやライブラリをWindowsにインストールする場合、PPM(Perl Package Manager)で行ないます。
インストール方法として、「オンラインで行なう場合」と「Perlモジュールをダウンロードした後ローカルで場合」
がありますが、「オンラインで行なう場合」は、PCがProxy経由の場合は、制約が出てきます。
私の場合は、Perlモジュールをダウンロードした後ローカルで行ないました。
Perlモジュール等をインストールする場合、PPM形式のファイルをダウンロードする必要があります。
GDの場合、 http://cpan.uwinnipeg.ca/module/GD （ActiveState default Perl 5.6 repository [2.06]）
→ http://ppm.activestate.com/PPMPackages/zips/6xx-builds-only/ から、GD.zipファイルをダウンロードし、
GD2.06のインストールを行なったが、GDの実際のバージョンが1.27であったため、日本語が表示できなかった。
このため、GDのバージョンを上げるため、
http://cpan.uwinnipeg.ca/module/GD （www.bnbes.org Perl 5.6 repository [2.16] ）→ http://www.bribes.org/perl/ppm/
→ http://www.bribes.org/perl/ppm/GD-2.16-PPM56.tar.gz からGD2.16(GD-2.16-PPM56.tar.gz)をダウンロードしました。
（注．GDは頻繁にバージョンアップされます。下のPPMがダウンロードできない場合は、http://www.bribes.org/perl/ppm/
から、最新バージョンをダウンロードします。）
最新GDは、GD-2.35-PPM56.tar.gz 24-Aug-2006 09:55 435kからダウンロードします。
しかし、また問題が発生しました。GD-2.16-PPM56.tar.gzには、ローカルインストールに必要なPPDファイルがありませんでした。
このような場合、GD2.06のPPDファイルをGD2.16用に修正し、インストールを行ないます。
しかし、またまた問題が発生しました。Perlバージョンが同じ 5.6 にもかかわらず、以下のエラーが出て
インストールできないマシンが出てきました。それは、本番マシンです。TEST環境マシンは問題なくインストールできています。
Error installing package 'GD': Read a PPD for 'GD', but it is not intended for t
his build of Perl (MSWin32-x86-multi-thread)
止むを得ず、本番マシンには、旧バージョンGD2.06のインストール時のリストを基に、GD2.16(GD-2.16-PPM56.tar.gz）
のモジュールでPerlフォルダを差し替えました。（Windows用は、バイナリ形式のため問題ないようです。）
GD::Graphの場合、http://ppm.activestate.com/PPMPackages/zips/6xx-builds-only/ から
http://ppm.activestate.com/PPMPackages/zips/6xx-builds-only/GDGraph.zip (ppm形式）
http://ppm.activestate.com/PPMPackages/zips/6xx-builds-only/GDTextUtil.zip (ppm形式）
をダウンロードし、インストールしようとしたが、GDTextUtil.zip（GD::Text用）の中に、Windows用のPPMファイル
がありませんでした（一般的にMSWin32-x86-multi-threadフォルダ内にある）。インストールの順番はGD→GD::Text→GD::Graphです。
GD::Textがインストールできないため、GDグラフは私用ライブラリーとして使用することにしました。
私用ライブラリー用のファイルは、別のサイト（下記URL）からダウンロードしました。
・GD::Graph⇒ http://search.cpan.org/~mverb/GDGraph-1.43/
・GD::Text ⇒ http://search.cpan.org/~mverb/GDTextUtil-0.86/
>インストール方法詳細（Perl、GD、GD::Graph、Jcode.pmのインストール方法)
| インストールの順番 | モジュール名 | PPM,PPDをダウンロードするためのサイトのページ | 備考 |
| 1 | GD | ・http://cpan.uwinnipeg.ca/module/GD | |
| 2 | GDTextUtil | ・http://cpan.uwinnipeg.ca/dist/GDTextUtil | |
| 3 | GDGraph | ・http://cpan.uwinnipeg.ca/module/GD::Graph |
４．グラフの作成方法
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); （６）ファイルに保存します 下表4-テスト用アプリケーションソースの「*6グラフ出力」参照。
1 #! /usr/local/bin/perl
2
3 #テスト用折れ線グラフ-2004.12.16
4 use jcode; #jcode.pl PM版。UTF-8コード変換に使用
5 chdir("C:\\Inetpub\\wwwroot\\uriage"); #カレントディレクトリ指定（IISの場合）
6 require "graphSave.pl"; #グラフ画像ファイル保存ルーチン
7 use lib 'C:/Inetpub/wwwroot/uriage'; #GD::Graphライブラリ格納フォルダ GD （固定）の場所
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("./GD/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、jcode.pmは含まれていせん） GD::Graph,GD::Textは、私用ライブラリとして同梱されています。 ●起動方法 （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行目と172行目（カレントディレクトリ指定（IISの場合）） 表4 テスト用アプリケーションソースの5行目を参照。 ②173行目（GD::Graphライブラリ格納フォルダ GD （固定）の場所） 表4 テスト用アプリケーションソースの7行目を参照。 ③181行目（ラベル文字等用の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 | 初版クリスマス版 |
最終更新日：2006.12.9