PHPで、 JpGraphを使い てみました
Windows IISならインストールがめちゃ簡単!
2006.12.9(改版)-2005.7.9(初版)
INDEX;

 1. Jpgraphについて
 2. インストール(GD/PHP/JpGraph) 
 3. 折れ線グラフサンプル
  3.1 グラフ用語の理解
  3.2 グラフ作成手順(折れ線、棒、円グラフの基本)
  3.3 折れ線グラフサンプルPHPソース
 4. 折れ線グラフサンプルその2(繰り返し処理の方法)
 5. グラフでないグラフ〜キャンバスグラフの作成方法(自由描画)
  5.1 キャンバスグラフサンプル1(スケール座標使用)
  5.2 キャンバスグラフサンプル2(形状いろいろ)(スケール座標使用)
 6. アンチスパムイメージの作成方法
 7. 2次元バーコードQRコードの作成方法
 8. JpGraph サンプル集(通常のグラフのサンプル313例)(ソースコード付き)
 9. JpGraph日本語マニュアル

>>サイト内グラフ関連リンク
 ・XML/SWF Chartsライブラリーを使うと超簡単!フラッシュグラフ作成

本ページは、OS Windows IIS + PHP 4.x + JpGraph 1.19をベースに書いています。

1.JpGraphについて

  JpGraphAditus Consulting(スウェーデン)が開発する、PHP4/PHP5対応の高機能なグラフ生成ライブラリです。
 JpGraphの日本版の提供販売は、アシアル株式会社が行なっています。
 JpGraphには、コミュニティ版(フリー)とプロフェッショナル版(有料)があります。
 JpGraphでは、アシアル社のホームぺージによると、以下のグラフ(プロット形式)をサポートされています。
グラフの種類
1.ラインプロット 2.バープロット 3.円プロット(2D & 3D) 4.中心円を持つ2D 円プロット
5.フィールドプロット 6.スプライン曲線 7.地球地図 8.ストックチャート
9.極性グラフ 10.レーダープロット 11.ガントチャート 12.インパルスグラフ
13.エラープロット 14.散布プロット 15.バルーンプロット 16.自由描画 等

 加わるに、スケール(目盛)が対数等も対応しています。  プロフェッショナル版は更に、QRコードを含む多くの種類のバーコードやさらに多くの種類のプロット形式をサポートされています。    JpGraphのマニュアルには、数多くの事例(198事例)があり、グラフ作成者にとって非常に分かりやすく親切に書かれています。  マニュアルは、日本語版をダウンロードできます。  各グラフのサンプルは、アシアル社のJpGraph サンプル集(通常のグラフのサンプル)のページにあります。 2.インストール(For Wiondows+IIS)   JpGraphでグラフを実現するには、GDライブラリ( http://www.boutell.com/gd/で取得可能)、JpGraph及びPHPの   インストールが必要です。   以下、Windows+IISで走行することを前提にインストール方法を記述します。 @ GDライブラリ(PHP Builtin GD library)(boutell)     PHP4.3以降、PHPに「PHP Builtin GD library」として同梱されています。インストールはありません。     PHP4.3以降を使用しましょう。   A JpGraph     日本語コミュニティ版(フリー)をアシアル社からダウンロードします。     PHPバージョンとの関係は、次のとおりです。     ・PHP 4.x <-> JpGraph 1.x (1.17(2005.6.1)/1.19(2005.7.26) /1.20.1(2006.1.10)/1.20.5(2006/9/29))     ・PHP 5.x <-> JpGraph 2.x ( JpGraph 2.0 (2005.7.26)/2.1.3(2006/9/29) )     解凍すると、srcフォルダ内にJpGraphライブラリー(モジュール群)がありますので、適当な場所に置きます。     解凍した後、日本語を使用するために、JpGraphのモジュール(jpg-config.inc)のFONT定義のソース修正するのみです。     後は、PHPアプリケーション(Webページ)から、必要なJpGraphモジュールをインクルードするだけです。   B PHP PHP 4.x版をダウンロードし、インストール(php.inの修正のみ)します。   C 走行環境(サーバ)     ここでのJpGraphの走行環境は、次のとおりです。
OSGDと関連ソフト備考
(ファイル構成例)

[jpgraph]
    |---[ex]
    |     |---PHPアプリケーション(Webページ)*1
    |           
    |---JpGraphモジュール群 *2
                 
*1:必要なモジュールをPHPアプリケーションがインクルードします
*2:srcフォルダ内のJpGraphモジュール群をここへコピー
             
           
・Windows2000Pro+IIS
・Windows98SE+PWS
・Windows2000Server
・ttf Font
・PHP(4.3.11)
・GD(2.0)
・JpGraph(1.17)
GD(2.0)はPHPに同梱。
JpGraph(1.17)は、フリー版。
※GD(2.0):Thomas Boutell's GD
 2.1 JpGraphのインストール JpGraphのモジュール(jpg-config.inc)を修正します。    (1)日本語TrueTypeフォントの格納ディレクトリを設定します。手っ取り早いのでWindowsのフォントを使用します。       (下の例は、Windows2000Proの場合)       jpg-config.incの43行目の日本語フォント定義定数MBTTF_DIRでフォントディレクトリーのパスを修正します。       定数TTF_DIRは、日本語以外のフォントディレクトリーのパスを設定しますが、デフォルトは、WindowsのTrueTypeフォントです。       例.C:/winnt/fonts/(Windows2000Server) C:/windows/fonts/(Windows2000Pro/Windows98SE)       FONTの種類は、(3)使用方法 参照。
表1 日本語TrueTypeフォント格納ディレクトリ名の設定(jpg-config.inc)
(修正前)
41 // DEFINE("CACHE_DIR","/tmp/jpgraph_cache/");
42 // DEFINE("TTF_DIR","/usr/X11R6/lib/X11/fonts/truetype/");
43 // DEFINE("MBTTF_DIR","/usr/share/fonts/ja/TrueType/");
↓43行目を修正
(修正後)
41 // DEFINE("CACHE_DIR","/tmp/jpgraph_cache/");
42 // DEFINE("TTF_DIR","/usr/X11R6/lib/X11/fonts/truetype/");
43 DEFINE("MBTTF_DIR","C:/windows/fonts/"); // "/usr/share/fonts/ja/TrueType/"
   (2)日本語TrueTypeフォントのファイル名(*.ttf/*.ttc)を設定します。手っ取り早いのでWindowsのフォントを使用します。              jpg-config.incの77〜80行目の日本語フォント定義定数       MINCHO_TTF_FONT---MS明朝用定数 Windows Fontファイル名:msmincho.ttc       PMINCHO_TTF_FONT--MS P 明朝用定数 Windows Fontファイル名:msmincho.ttc       GOTHIC_TTF_FON----MSゴシック用定数 Windows Fontファイル名:MSGOTHIC.ttc       PGOTHIC_TTF_FONT--MS P ゴシック用定数 Windows Fontファイル名:MSGOTHIC.ttc       のフォントファイル名を修正します。
表2 日本語TrueTypeフォントファイル名の設定方法(jpg-config.inc)
(修正前)
76 // Japanese TrueType font used with FF_MINCHO, FF_PMINCHO, FF_GOTHIC, FF_PGOTHIC
77 DEFINE('MINCHO_TTF_FONT','ipam.ttf');
78 DEFINE('PMINCHO_TTF_FONT','ipamp.ttf');
79 DEFINE('GOTHIC_TTF_FONT','ipag.ttf');
80 DEFINE('PGOTHIC_TTF_FONT','ipagp.ttf');
↓77〜80行目を修正
(修正後)
76 // Japanese TrueType font used with FF_MINCHO, FF_PMINCHO, FF_GOTHIC, FF_PGOTHIC
77 DEFINE('MINCHO_TTF_FONT','msmincho.ttc');
78 DEFINE('PMINCHO_TTF_FONT','msmincho.ttc');
79 DEFINE('GOTHIC_TTF_FONT','MSGOTHIC.ttc');
80 DEFINE('PGOTHIC_TTF_FONT','MSGOTHIC.ttc');
   (3)フォントの使用方法      TrueTypeフォントファミリー定数(FF_XXXXX形式 (注))及びスタイル定数(FS_XXX形式)等を指定します。      (例-日本語でない場合)       $graph->yaxis->SetFont(FF_ARIAL,FS_NORMAL,10); //Y軸目盛ラベルのフォント(ARIAL,標準,10Pix)       $lineplot2->value->SetFont(FF_FONT1,FS_BOLD); //Y軸データポイントの値のフォント(内臓フォント中,太字)       $graph->title->SetFont(FF_ARIAL,FS_BOLD,24); //グラフタイトルのフォント(ARIAL,太字,24Pix)        ・FS_BOLD:太字        ・FS_NORMAL:標準      (例-日本語の場合)       //X軸タイトルを描く       $xtitle=utf8_conv("月"); //X軸タイトルをUTF-8へ変換(日本語の場合、UTF-8変換必須)       $graph->xaxis->title->Set($xtitle); //タイトルを設定       $graph->xaxis->title->SetColor("blue"); //タイトルの色       $graph->yaxis->title->SetFont(FF_MINCHO,FS_NORMAL,11); //X軸タイトルフォント(日本語)        日本語の場合、FS_BOLD(太字)は指定できない。      (注)       <日本語の場合のTrueTypeフォントファミリー定数>        上記(2)日本語フォントのファイル名(*.ttf/*.ttc)を設定しますの上から順に、          FF_MINCHO          FF_PMINCHO          FF_GOTHIC          FF_PGOTHIC        と設定されています。       <日本語でない場合のJpgraph定義済TrueTypeフォントファミリー定数>        FF_ フォントファミリーのディレクトリパスの省略値は、PHP.iniのシステムルート/fonts/です。        これは、WindowsのTrueType FONTです。例. C:/winnt/fonts/
FF_FONT0 内蔵フォント 非常に小さなフォント (TrueType フォントではない。フォントサイズは指定できない。)
FF_FONT1 内蔵フォント 中ぐらいのサイズのフォント (同上。フォントサイズは指定できない。) 
FF_FONT2 内蔵フォント 大きなサイズのフォント (同上。フォントサイズは指定できない。) 
FF_ARIAL TrueType フォント Arial フォント 
FF_VERDANA TrueType フォント Verdana フォント 
FF_COURIER TrueType フォント 固定幅の Courier フォント 
FF_BOOK TrueType フォント Bookman 
FF_COMIC TrueType フォント Comic sans 
FF_TIMES TrueType フォント Times New Roman 
FF_GEORGIA TrueType フォント Georgia 
FF_TREBUCHE TrueType フォント Trebuche 
FF_VERA TrueType フォント Gnome Vera font, Available from http://www.gnome.org/fonts/ 
FF_VERAMONO TrueType フォント Gnome Vera Mono font, Available from http://www.gnome.org/fonts/ 
FF_VERASERIF TrueType フォント Gnome Vera Serif font, Available from http://www.gnome.org/fonts/ 
FF_CHINESE TrueType フォント Installed chinese font 
FF_SIMSUN TrueType フォント Installed chinese font 
FF_BIG5 TrueType フォント Installed chinese BIG5 font (needs iconv()) 
 2.2 PHPのインストール    PHPのインストールは次のように行ないます。    @ PHP 4.3.11のダウンロード(任意なフォルダへ)します。    A PHPを解凍します。    B php-4.3.11-Win32フォルダ内の全てのファイルをC:\php へコピーします。    C phpフォルダ内のphp.ini-distファイルについて、マルチバイト対応機能及びグラフ機能を有効にするために、      テキストエディターで修正した後、php.iniにリネームし、次のフォルダに格納します。      ・Windows2000Server  C:\winnt      ・Windows2000Pro/Windows98SE C:\windows    php.iniの修正内容は以下のとおり行です。修正は、
PHPマニュアル「SJIS ユーザ用の php.iniの 設定」に準じています。
表3 PHP 4.3.11 php.iniの修正方法
修正前修正後内容(赤字のある行が修正行です)
  94 output_buffering = Off
 106 ;output_handler =
 365 register_globals = Off
 400 ;default_charset = "iso-8859-1"
 428 extension_dir = "./"
 439 ;cgi.force_redirect = 1
 550 ;extension=php_gd2.dll
 560 ;extension=php_mbstring.dll
1038 [mbstring]
1039 ; language for internal character representation.
1040 ;mbstring.language = Japanese
1041
1042 ; internal/script encoding.
1043 ; Some encoding cannot work as internal encoding.
1044 ; (e.g. SJIS, BIG5, ISO-2022-*)
1045 ;mbstring.internal_encoding = EUC-JP
1046 
1047 ; http input encoding.
1048 ;mbstring.http_input = auto
1049 
1050 ; http output encoding. mb_output_handler must be
1051 ; registered as output buffer to function
1052 ;mbstring.http_output = SJIS
1053 
1054 ; enable automatic encoding translation accoding to 
1055 ; mbstring.internal_encoding setting. Input chars are
1056 ; converted to internal encoding by setting this to On.
1057 ; Note: Do _not_ use automatic encoding translation for
1058 ;       portable libs/applications.
1059 ;mbstring.encoding_translation = Off
1060 
1061 ; automatic encoding detection order.
1062 ; auto means 
1063 ;mbstring.detect_order = auto
1064 
1065 ; substitute_character used when character cannot be converted
1066 ; one from another
1067 ;mbstring.substitute_character = none;

  94 output_buffering = On
 106 output_handler = mb_output_handler
 365 register_globals = On  ←注1
 400 default_charset = "Shift-JIS"
 428 extension_dir = "./extensions/"
 439 cgi.force_redirect = 0  ←注2
 550 extension=php_gd2.dll        ←コメント外し
 560 extension=php_mbstring.dll   ←コメント外し
1038 [mbstring]
1039 ; language for internal character representation.
1040 mbstring.language = Japanese  ←コメント外し
1041
1042 ; internal/script encoding.
1043 ; Some encoding cannot work as internal encoding.
1044 ; (e.g. SJIS, BIG5, ISO-2022-*)
1045 mbstring.internal_encoding = EUC-JP  ←コメント外し。注3必読
1046 
1047 ; http input encoding.
1048 mbstring.http_input = auto            ←コメント外し
1049 
1050 ; http output encoding. mb_output_handler must be
1051 ; registered as output buffer to function
1052 mbstring.http_output = SJIS           ←コメント外し
1053 
1054 ; enable automatic encoding translation accoding to 
1055 ; mbstring.internal_encoding setting. Input chars are
1056 ; converted to internal encoding by setting this to On.
1057 ; Note: Do _not_ use automatic encoding translation for
1058 ;       portable libs/applications.
1059 mbstring.encoding_translation = On
1060 
1061 ; automatic encoding detection order.
1062 ; auto means 
1063 mbstring.detect_order = auto         ←コメント外し
1064 
1065 ; substitute_character used when character cannot be converted
1066 ; one from another
1067 mbstring.substitute_character = none  ←コメント外し
(注1)register_globals = On register_globalsは、マルチバイト対応機能及びグラフ機能とは関係ありません。 (注2)cgi.force_redirect = 0 IISの場合、必須。cgi.force_redirectは、マルチバイト対応機能及びグラフ機能とは関係ありません。 (注3)mbstring.internal_encoding = EUC-JP PHPスクリプトは、ここの値に合わせてソースのコードをEUCで作成します。 3.折れ線グラフサンプル  3.1 グラフ用語の理解     グラフ用語説明のグラフは、3.3 グラフサンプルPHPで作成したものです。
図1 グラフ用語説明サンプルグラフ

(説明)
 @ Label-軸ラベル:軸の目盛の値。例.$30,000(Y軸) 12(X軸)。軸を axis と言う。
 A Ticks-ティック:軸の目盛のマーク。例.-(Y軸)
 B title-ラベルタイトル:軸のタイトル。例.ドル(Y軸) 月(X軸)
 C TextLabelInterval-テキストラベルインターバル:軸ラベル間のインターバル(Pix値)。このグラフ例では500。
 D TextTickInterval-テキストティックインターバル:軸の目盛のマークのインターバル(Pix値)。このグラフ例では100。
 E TitleMargin-タイトルマージン:軸のタイトルと軸線の間のマージン(Pix値)。
   例.$graph->yaxis->SetTitleMargin(60);   //タイトルの表示位置を調整する。軸とタイトルの間を60Pix空ける。
 F LabelMargin-タイトルマージン:軸の目盛の値(例.$30,000)と軸線の間のマージン(Pix値)。
   例.$graph->yaxis->SetLabelMargin(10);   //軸と軸ラベルの値の間を10Pix空ける
 3.2 グラフ作成手順(折れ線、棒、円グラフの基本)     基本グラフの折れ線、棒及び円の3つのグラフについて、基本的な作成手順を述べます。     詳細な作成方法については、JpGraphのマニュアルを参照して下さい。マニュアルはダウロードファイルに同梱されています。
    ・日本語マニュアルについては、
アシアル社からダウンロードできます。     また、アシアル社のWebページJpGraph マニュアルおよびJpGraph関数(CLASS/MODULE)を参照ください。     ・JpGraph で色(カラー)を指定する場合、3つの方法があります。      @400個の定義済みのカラー名を使用します。例.SetColor("yellow");       定義済みのカラー名は係数を用いて調節するこができます。       定数は 0 < f < 1 でより暗く、0 あるいは 1 で元のカラー、 f > 1 でより明るくなります。値 > 1は色を明るくします。       例.SetColor("khaki:0.5"); // "khaki" の暗いバージョン       例.SetColor("yellow:1.2"); // "yellow" の明るいバージョン       定義済みの色名は、JpGraph定義済みのカラー一覧を参照してください。      ARGB 形式で指定します。例.SetColor(array(65,100,176));      B16 進数形式で指定します。例.SetColor("#A16BFF");
表4 3つのグラフの作成手順
手順折れ線グラフ(XYプロット)棒グラフ(縦棒)(XYプロット)円グラフ(非3D)(非XYプロット)
1.JpGraphのモジュールを
  インクルードする*0

2.グラフデータを作成する
  (Y軸)
3.X軸目盛ラベルを作成する


4.新しいグラフオブジェクト
  を生成する*1

5.軸の目盛スケールを定義する*2

6.グラフのタイトルを描く*9

7.X軸目盛ラベルを描く
  (折れ線、棒の場合)

8.X軸、Y軸のタイトルを書く
  (折れ線、棒の場合)
(以上、グラフオブジェクト操作)

9.新しいプロットオブジェクト
  を生成する*3

10.円プロットのラベル描く
  (円の場合)




11.凡例を描く*4

12.グラフの線や面を色で飾る*5
   

13.グラフにプロットを描く*6

14.グラフを出力する*7

15.PHPソースを保存する

16.グラフを表示するHTMLを作成、保存する

<html>

<img src="xxxxx.php"><!--グラフはIMGタグで-->

</html>

17.この手順のグラフ*8
      (下図)
include ("../jpgraph.php");
include ("../jpgraph_line.php");
 〜
$ydata = array(17,21,41,14,30,9);
(各月の最高温度)
$xdata = array("Jan","Feb","Mar",
               "Apr","May","Jun");
 〜
$graph = new Graph(300,200,"auto");	
 〜
 〜
$graph->SetScale("textlin");

$graph->title->Set("Line Example");

$graph->xaxis->SetTickLabels($xdata);


$graph->xaxis->title->Set("Month");
$graph->yaxis->title->Set("y-title");


$lp1 = new LinePlot($ydata);


//
//
//
//


$lp1->SetLegend("Temperature");

$lp1->SetColor("orange");


$graph->Add($lp1);

$graph->Stroke();


≫この手順のソースとグラフ


include ("../jpgraph.php");
include ("../jpgraph_bar.php");
 〜
$ydata = array(17,21,41,14,30,9);
(各月の最高温度)
$xdata = array("Jan","Feb","Mar",
               "Apr","May","Jun");
 〜
$graph = new Graph(300,200,"auto");	
 〜
 〜
$graph->SetScale("textlin");
 〜
$graph->title->Set("Bar Example");
$graph->subtitle->Set('(sample-barplot.php)');
$graph->xaxis->SetTickLabels($xdata); 


$graph->xaxis->title->Set("Month");
$graph->yaxis->title->Set("y-title");


$bp1 = new BarPlot($ydata);


//





$bp1->SetLegend("Temperature");

$bp1->SetFillGradient
     ("navy","lightsteelblue",GRAD_MIDVER);
//棒のグラデーション↑(実際は、1行で書きます)

$graph->Add($bp1);

$graph->Stroke();

≫この手順のソースとグラフ

include ("../jpgraph.php");
include ("../jpgraph_pie.php");
 〜
$ydata = array(17,21,25,14,20,9);
(各月の晴天の回数)
$xdata = array("Jan","Feb","Mar",
               "Apr","May","Jun");
 〜
$graph = new PieGraph(300,200,"auto");	
 〜
 〜
//SetScaleなし
 〜
$graph->title->Set("Pie Example");

//X軸目盛はない


//軸のタイトルはない
//軸のタイトルはない


$pp1 = new PiePlot($ydata);


$pielbl = array("Jan\n%.1f%%",
   "Feb\n%.1f%%",
   "Mar\n%.1f%%","Apr\n%.1f%%",
   "May\n%.1f%%","Jun\n%.1f%%");
$pp1->SetLabels($pielbl);

$pp1->SetLegends($xdata);

$p1->SetTheme("pastel");
 //"earth","pastel","sand","water"


$graph->Add($pp1);

$graph->Stroke();

≫この手順のソースとグラフ


※グラフの円の大きさはSetSizeで設定します。
 サンプルは、デフォルト値。
 例. $pp1->SetSize(0.4);
*0,*1,*3;インクルードモジュール名,グラフオブジェクト,プロットオブジェクト

インクルードモジュールとグラフオブジェクト、プロットオブジェクトの関連
No インクルードモジュール名 方法 グラフOBJ スケール プロットOBJ等 X-Y Plot
1 jpg-config.inc(構成ファイル) 自動
2 jpgraph.php(ベースモジュール) include必須
3 jpgraph_bar.php(棒プロット) 使用時include new Graph() SetScale("intlin",..) new BarPlot() X-Y Plot
4 jpgraph_canvas.php
(キャンバスプロット)
使用時include new CanvasGraph() new CanvasScale
new Shape()
new CanvasRectangleText()
非X-Y Plot
5 jpgraph_canvtools.php
(キャンバスプロットツール)
使用時include jpgraph_canvas.php
と併用
-   非X-Y Plot
6 jpgraph_error.php(エラープロット) 使用時include new Graph() SetScale("intlin",..) new ErrorPlot() X-Y Plot
7 jpgraph_flags.php(国旗表示) 使用時include グラフと併用 new IconPlot();
SetCountryFlag('iceland',…) //国旗表示
非X-Y Plot
8 jpgraph_gantt.php(ガントチャート) 使用時include new GanttGraph() 別のScaleメソッドあり new GanttBar() //横ganttバー
new MileStone() //マイルストーン
new GanttVLine() //垂直ライン
非X-Y Plot
9 jpgraph_iconplot.php(アイコン表示) 使用時include - new IconPlot("xxx.jpg",...)  
10 jpgraph_line.php(折れ線プロット) 使用時include new Graph() SetScale("intlin",..) new LinePlot()
new AccLinePlot() //積み上げ
X-Y Plot
11 jpgraph_log.php(対数目盛生成) 使用時include グラフと併用 SetY2Scale("log"); -  
12 jpgraph_pie.php(円プロット) 使用時include new PieGraph() なし new PiePlot()
new PiePlotC() //センターサークル付き
非X-Y Plot
13 jpgraph_pie3d.php(3D円プロット)
(jpgraph_pie.phpもインクルード)
使用時include new PieGraph() なし new PiePlot3D() 非X-Y Plot
14 jpgraph_plotband.php
(グラフに帯を生成)
自動 グラフと併用 new PlotBand() //帯を描く  
15 jpgraph_plotmark.inc
(プロットマークを生成)
自動 プロットマーク      
16 jpgraph_polar.php(極座標プロット) 使用時include new PolarGraph() なし new PolarPlot() 非X-Y Plot
17 jpgraph_radar.php(レーダプロット) 使用時include new RadarGraph() なし new RadarPlot() 非X-Y Plot
18 jpgraph_regstat.php
(スプライン曲線プロット)
使用時include グラフと併用 - new Spline()  
19 jpgraph_scatter.php(散布図) 使用時include new Graph() SetScale("intlin",..) new FieldPlot() //フィールドプロット
new ScatterPlot() //インパルス
X-Y Plot
20 jpgraph_stock.php(ストックチャート) 使用時include new Graph() SetScale("textlin"); new StockPlot() X-Y Plot
21 jpgraph_gb2312.php ? ? ?  
22 jpgraph_gradient.php ? ? ?  
23 jpgraph_imgtrans.php ? ? ?  
*2:スケールを指定するには、SetScale("スケール定数") メソッドを使用します。スケール定数は、以下のとおりです。  ・textlin:X 軸にはテキスト スケールが、Y 軸にはリニア スケールが適用されます。  ・linlin:X 軸、Y 軸にリニア スケールが適用されます。  ・linlog:X 軸にはリニア スケールが、Y 軸には対数スケールが適用されます。  ・loglog:X 軸、Y 軸に対数スケールが適用されます。  ・textint:X 軸にはテキスト スケールが、Y 軸にはインテジャー スケールが適用されます。  ・textlog:X 軸にはテキスト スケールが、Y 軸には対数スケールが適用されます。 *3:新しいプロットの生成は、折れ線及び棒グラフの場合必要なY軸データ分、それぞれプロットオブジェトの生成が必要です。   例.2データの場合(折れ線グラフの例)    $ydata1 = array(17,21,41,14,30,9); //Y軸データの生成    $ydata2 = array(7,23,31,24,29,11); //Y軸データの生成    …    $lp1 = new LinePlot($ydata1); //プロットオブジェクトの生成    $lp2 = new LinePlot($ydata2); //プロットオブジェクトの生成    …    $graph->Add($lp1); //グラフにプロットを描く    $graph->Add($lp2); //グラフにプロットを描く *4:凡例の表示の値は、グラフにより異なります。 *5:グラフにより色の指定が異なります。  ●折れ線グラフ   例. $lp1->SetColor("orange"); //色の指定  ●円グラフの円の面の色は、省略すると$p1->SetTheme("earth");が適用されます。   SetTheme(テーマ)のパラメーターは、"earth","pastel","sand","water"があります。   各テーマの定義色は、JpGraph 円プロット用のテーマ カラーを参照してください。   なお、自分で色を指定するにはSetSliceColorsメソッドを使用します。詳細は、JpGraphのマニュアルを参照。   例. $p1->SetSliceColors(array('red','green','blue')); //色の指定     ●棒グラフでは、棒にグラデーションをかけることができます。   例1.$bp1->SetFillGradient("navy","lightsteelblue",GRAD_MIDVER); //グラデーション定義値   
棒グラフの棒のグラデーションの種類
GRAD_VER:Vertical gradient 
GRAD_HOR:Horizontal gradient 
GRAD_MIDHOR:From the center and out, horizontal 
GRAD_MIDVER:From the center and out, vertical 
GRAD_WIDE_MIDVER:From the center and out, vertical. 
             Wide mid section. 
GRAD_WIDE_MIDHOR:From the center and out, horizontal. 
             Wide mid section. 
GRAD_CENTER:From the center and beaming out 
GRAD_LEFT_REFLECTION:Simulates a reflection on the left side 
GRAD_RIGHT_REFLECTION:Simulates a reflection on the right side 
GRAD_RAISED_PANEL:Raised panel with shadow 
    


例2.$bl1->SetFillColor('orange'); //色の指定
 
●いろいろな場所の色の指定方法(凡例は割愛)


・タイトル、ラベルなどの文字の色
  • グラフタイトル@
  • Y軸ラベルA
  • Y軸タイトルラベルB
  • X軸ラベルC
  • X軸タイトルラベルD
・グラフ描写の色(折れ線、棒、円など)
  • 折れ線E
・グリッド線の色
  • Y軸グリッドF
・グラフフレームの背景の色
  • グラフマージンG(薄緑の部分)
  • プロットエリアH(青空の画像の部分)
<?php
//折れ線グラフ 作成手順サンプル
include ("../jpgraph.php");
include ("../jpgraph_line.php");
$ydata = array(17,21,41,14,30,9); //(各月の最高温度)
$xdata = array("Jan","Feb","Mar",
               "Apr","May","Jun");
$graph = new Graph(300,200,"auto"); //グラフフレームの大きさ	

$graph->img->SetImgFormat("jpeg"); //画像の種類を明示的に指定する。

 //タイトルの色@  
$graph->title->SetColor("blue");  
 //グラフプロット面を画像で飾る H                          
$graph->SetBackgroundImage("./img/sky1.jpg",BGIMG_FILLPLOT);
 //グラフプロット面に色を塗るH 
//$graph->SetColor("red"); 
 //グラフフレームのマージン部分に色を塗るG 
$graph->SetMarginColor("#ccffcc");

$graph->SetScale("textlin");
$graph->title->Set("Line Plot Example");
$graph->xaxis->SetTickLabels($xdata);
$graph->xaxis->title->Set("Month");
$graph->yaxis->title->Set("y-title");

  //X軸目盛ラベルの色C 
$graph->xaxis->SetColor("green");
 //Y軸目盛の色(目盛値、目盛マーク、Y軸線)A  
$graph->yaxis->SetColor("brown");
//Y軸グリッド線の色 F 
$graph->ygrid->SetColor("#ffffff");
 //グラフX軸タイトルの色D 
$graph->xaxis->title->SetColor("green");
//グラフY軸タイトルの色B 
$graph->yaxis->title->SetColor("brown"); 

$lp1 = new LinePlot($ydata); //<font color=red>*2</font>

$lp1->SetColor("red");   //折れ線に色を付けるE 

$lp1->SetLegend("Temperature");
$graph->Add($lp1);
$graph->Stroke("./tmp/samplelineplot-color.jpg");   //画像保存
//$graph->Stroke();                                 //Web表示
?>




*6:グラフにプロットを描く場合は、生成したプロットオブジェクトごとに行ないます。例. *3参照 *7:グラフの出力方法には、4つあります。詳細は、3.3 ラフサンプルPHP参照。   @クライアント画面に表示する Aサーバに保存する Bダウンロード画面をクライアント画面に表示する   CHTML内の<IMG>タグで表示する    「Aサーバに保存する」や「Bダウンロード画面をクライアント画面に表示する」の場合、画像の種類を設定します。    例.$graph->img->SetImgFormat("jpeg"); //画像の種類を明示的に指定する。jpeg/gif/png     jpegの場合、実際のファイル名の拡張子は、jpgでも良い。 *9:サブタイトル   グラフには、タイトルの他にサブタイトルタブタイトルを書けます。   ・サブタイトル例 $graph->subtitle->Set('(sample-barplot.php)');   ・タブタイトル例 $graph->tabtitle->Set('Line Plot Example');
 3.3 折れ線グラフサンプルPHPソース      このサンプルソースは、EUCコードで作成しています。このサンプルで作成したグラフ画像は、ここをクリック。
表5 折れ線グラフサンプルPHPソース jpg01-lineplot-sampleeuc.php クリップボードにコピーします!
<?php//折れ線グラフサンプル//////////////////////////////////////
//ファイル名:jpg01-lineplot-sampleeuc.php//作成者:ma3ki
//作成日:2005.6.19
////////////////////////////////////////////////////////////
//インクルードモジュール(パスは適宜配置します)
include ("../jpgraph.php");          //jpgraph.php*1 必須
include ("../jpgraph_line.php");     //jpgraph_line.php*1 折れ線グラフの場合
//Y軸データ配列(例. 売上高 単位:ドル)
$ydata = array(1100,500,800,1200,500,2100,900,1300,500,700,1000,700);
$ydata2 = array(100,1900,1500,700,2200,1400,1800,900,2100,1300,1500,600);
//X軸データ配列(例. 月)
$datax = array("4","5","6","7","8","9","10","11","12","1","2","3");

$gJpgBrandTiming=true;

// グラフオブジェクトの生成。new GraphとSetScaleは必須
$graph = new Graph(600,400,"auto"); //グラフオブジェクトの生成()内は、グラフ画像のwidth,height,"auto"*1
$graph->SetScale("textlin",0,3000); //軸のスケール(目盛)*2
                                   //textlin:X 軸にはテキスト スケールが、Y 軸にはリニア スケールが適用される
                                  //,0,3000:目盛の最小値0,最大値3000(省略可)。省略時Y軸データより自動計算される
//グラフ画像の種類の選択
$fileending = "jpeg";                      //画像の種類。jpeg/gif/png
$graph->img->SetImgFormat("$fileending");  //画像の種類を明示的に指定する。
//プロットエリアにバックグラウンド画像を描く
$graph->SetBackgroundImage("kamome2.jpg",BGIMG_FILLPLOT); //BGIMG_FILLPLOT:プロットエリアBGIMG_COPY/BGIMG_FILLPLOT*3
$graph->AdjBackgroundImage(0.4,-0.7,-1); //バックグラウンド画像の色を調整する。*4
                                         //Brightness=0.4, contrast=-0.7, saturation=-1
//グラフ画像を飾る
$graph->SetShadow();                   //グラフ画像(外枠)に影をつける
$graph->img->SetMargin(70,120,40,40);  //グラフ画像のマージン 値はLeft,Right,Top,Bottom (Pix) の順に指定
$graph->SetMarginColor("#dcdcdc");     //グラフ画像のマージンの色
//$graph->SetColor("beige");           //プロット域の色
//X軸目盛ラベルデータ(明示的に配列定義)を描く
$graph->xaxis->SetTickLabels($datax);  //目盛ラベルの値を描く
$graph->xaxis->SetColor("blue");       //目盛ラベルの色
$graph->xgrid->Show();                 //X軸グリッド線を描く
//Y軸目盛、ラベルを描く(ラベル値は自動的に計算されて描かれる)
$graph->yscale->ticks->Set(500,100); //Y軸目盛マークの表示の仕方を指定する。
                                 //(500,100):第1パラの値毎にY軸ラベルを描き、第2パラの値毎に目盛マークを描く
//$graph->yaxis->SetLabelFormat('\%d');  //Y軸目盛ラベルの値を編集する1。編集記号は、PHP sprintf()関数に同じ。
$graph->yaxis->SetLabelFormatCallback('yLabelFormat'); //Y軸目盛ラベルの値を編集する2。サブルーチンコール。*5
$graph->yaxis->SetColor("brown");       //Y軸目盛の色(目盛値、目盛マーク、Y軸線)
$graph->yaxis->SetWeight(1);            //Y軸目盛の軸線の太さ(Pix)
$graph->yaxis->SetTickSide(SIDE_LEFT);  //Y軸目盛マークの表示の仕方。SIDE_LEFT:縦軸線の左側に描く*6
//$graph->xaxis->HideFirstTicklabel();        //Y軸ラベルの最初の値(例では、0(ゼロ)値)を表示しない
$graph->ygrid->SetFill(true,'#EFEFEF@0.5','#BBCCFF@0.5'); //Y軸グリッド線の間を交互に色で飾る*7
$graph->ygrid->Show();                         //Y軸グリッド線を描く
$graph->yaxis->SetLabelAlign('right','top');   //Y軸ラベルの位置づけを行なう*8
$graph->yaxis->SetLabelAngle(45);              //Y軸ラベルの傾きを決める。SetFontと組み合わせ使用する。*9
$graph->yaxis->SetFont(FF_ARIAL,FS_NORMAL,10); //Y軸ラベルのフォント。*9,*10
//グラフタイトルを描く
$title="平成16年度担当別・月別推移グラフ";       //グラフタイトル
$title=utf8_conv($title);            //UTF-8へ変換(日本語の場合必須)*10
$graph->title->Set($title);          //タイトルを設定
$graph->title->SetColor("blue");     //タイトルの色
//X軸タイトルを描く
$xtitle="月";                        //X軸タイトル
$xtitle=utf8_conv($xtitle);          //UTF-8へ変換(日本語の場合必須)*10
$graph->xaxis->title->Set($xtitle);  //タイトルを設定
$graph->xaxis->title->SetColor("blue");  //タイトルの色
//Y軸タイトルを描く 
$ytitle="ルド";                      //Y軸タイトル
$ytitle=utf8_conv($ytitle);          //UTF-8へ変換(日本語の場合必須)*10
$graph->yaxis->title->Set($ytitle);  //タイトルを設定
$graph->yaxis->SetTitleMargin(60);   //タイトルの表示位置を調整する。軸とタイトルの間を60Pix空ける。
$graph->yaxis->SetLabelMargin(10);   //軸と軸ラベルの値の間を10Pix空ける。

//グラフタイトル、X軸タイトル、Y軸タイトルのフォント
$graph->title->SetFont(FF_MINCHO,FS_NORMAL,13);         //グラフタイトルフォント(日本語)*10
$graph->yaxis->title->SetFont(FF_MINCHO,FS_NORMAL,11);  //Y軸タイトルフォント(日本語)*10
$graph->xaxis->title->SetFont(FF_MINCHO,FS_NORMAL,11);  //X軸タイトルフォント(日本語)*10
                                                        //第1パラ、第2パラはJpgraphの定義値
//凡例を定義する
//$graph->legend->Pos(0.05,0.5,"right","center");
$graph->legend->SetAbsPos(15,40,'right','top');   //凡例の表示位置。凡例ボックスのX座標,Y座標,水平位置,垂直位置。
                                                  //ここでは、右上端からの40Pix下(X座標)且つ15Pix左(Y座標)に表示
$graph->legend->SetFont(FF_MINCHO,FS_NORMAL,11);  //凡例文字のフォント*10
$graph->legend->SetColor("green");                //凡例文字の色
$graph->legend->SetFillColor('lightyellow');      //凡例フレームの背景色 
////////////////////////
// 折れ線グラフを生成する
$lineplot=new LinePlot($ydata);    //データ1*1
$lineplot2=new LinePlot($ydata2);  //データ2*1
 //データ1を描く
$lineplot->SetColor("blue");       //折れ線の色
$lineplot->SetWeight(1);           //折れ線の太さ(Pix)
$lineplot->mark->SetType(MARK_IMG_DIAMOND,5,0.6); //プロットマークの型(Pjgraphビルトインマーク)*11
                                                  //MARK_IMG_DIAMOND: A 3D rendered diamond
                                                  //5,0.6:マークの色とスケーリング
//$lineplot->mark->SetWidth(4);                   //プロットマークの幅は、Pjgraphビルトインマークの場合固定です。
 //データ2を描く
$lineplot2->SetColor("red");     //折れ線の色
$lineplot2->SetWeight(2);        //折れ線の太さ(Pix)
$lineplot2->mark->SetType(MARK_FILLEDCIRCLE ); //プロットマークの型。MARK_FILLEDCIRCLE :A filled circle *11
$lineplot2->mark->SetFillColor("red");         //プロットマークの色。MARK_FILLEDCIRCLEは、Jpgraphの定義値。
$lineplot2->mark->SetWidth(4);                 //プロットマークの幅(Pix)
//$lineplot2->value->Show();                     //Y軸データポイントの値を表示する
$lineplot2->value->SetColor("darkred");        //Y軸データポイントの値の色
$lineplot2->value->SetFont(FF_FONT1,FS_BOLD);  //Y軸データポイントの値のフォント *10
//$lineplot2->value->SetFormat('$ %0d');         //Y軸データポイントの値のフォーマット編集
$lineplot2->SetWeight(1);                      //折れ線の太さ(Pix)
//凡例を描く
$man1=utf8_conv("松浦亜弥");
$man2=utf8_conv("小倉優子");
$lineplot->SetLegend($man1);  //データ1用
$lineplot2->SetLegend($man2); //データ2用

// グラフにプロットを描く
$graph->Add($lineplot);       //データ1
$graph->Add($lineplot2);      //データ2

//グラフの出力・・・3つの方法があります。

// グラフを画面に表示する Display the graph------------------その1
 $graph->Stroke();                       //画面に表示する。<img>タグで表示可。

// グラフをファイルに保存する Display the graph--------------その2
 //$fln = file_name($fileending);
 //$filename = "./tmp/" . $fln;
 //$graph->Stroke("$filename");         //ファイル出力
 //print <<<EOD
 //<html><head><title>ファイル出力</title></head>
 //<body>
 //<center>
 //グラフファイルを出力しました・・・<br>
 //<a href="$filename">>$fln</a> 
 //</center>
 //</body></html>
//EOD;
   //EOD;の行は、必ず1列目に戻します。
// グラフのダウンロード画面を表示する Display the graph------その3
 //$dloadimg=$graph->Stroke(_IMG_HANDLER); 
 //$filename = file_name($fileending);
 //$file_type = "image/$fileending"; 
 //header("Content-Type: application/$file_type"); 
 //header("Content-Disposition: attachment; filename=".$filename); 
 //header("Pragma: no-cache"); header("Expires: 0"); 
 //ImagePNG($dloadimg); 
//サブルーチン
 //UTF-8変換
function utf8_conv($p){
 $cd = "EUC-JP";  //mb_detect_encoding($p)を使うと結果がおかしい場合がある。
                  //このスクリプトのテキストエディターでの作成文字コード(EUC-JP/SJIS)に合わます。
 $rp = mb_convert_encoding($p, "UTF-8", $cd);
 return $rp;
}
//ファイル名作成
function file_name($f){
 if($f == "jpeg"){$f="jpg";}
 $fl = "jpgrapf-" . date(YmdHis) . sprintf ("%03d", rand(1,999)) . ".$f";
 return $fl;
}
//Y軸ラベルフォーマット(千円単位カンマ区切り)
function yLabelFormat($aLabel) { 
 return "$". number_format($aLabel);
    //return number_format($aLabel) 
} 
/////////////////////END////////////////////////
?>

*1:グラフオブジェクトとプロットオブジェクト
 3.2 グラフ作成手順-表4 3つのグラフの作成手順参照。
*2:Y軸のスケール(目盛)
 例1. $graph->SetScale("textlin",0,3000); //軸のスケール(目盛)
  ・"textlin":スケール定数。3.2 グラフ作成手順-*2参照。
  ・0:Y軸目盛の最小値(明示的に指定したい場合)
  ・3000:Y軸目盛の最大値(明示的に指定したい場合)
 例2. $graph->SetScale("textlin");  //Y軸目盛の最小値、最大値を省略
    省略の場合は、Y軸データの値により自動計算されます。
*3:バックグラウンド画像の配置
 例. $graph->SetBackgroundImage("kamome2.jpg",BGIMG_FILLPLOT);
  ・"kamome2.jpg":画像ファイル名のパス
  ・BGIMG_FILLPLOT:画像の配置。
    BGIMG_FILLPLOT;Adjust the size of the image to just fit the plotarea 
    BGIMG_FILLFRAME;ADjust the size of the image to just fit the entire graph area 
    BGIMG_COPY;Just copy the image as is to upper left corner 
    BGIMG_CENTER;Just copy the image but center it. 
*4:バックグラウンド画像の色を調整する
 例. $graph->AdjBackgroundImage(0.4,-0.7,-1); 
     第1パラメータ:Brighness (-1〜1) 
     第2パラメータ:Constrast (-1〜1) 
     第3パラメータ:Saturation (-1〜1) 
*5:Y軸目盛ラベルの値を編集する(サブルーチンコール)
 例.
     $graph->yaxis->SetLabelFormatCallback('yLabelFormat'); //yLabelFormatは、関数名。

     //Y軸ラベルフォーマット(千円単位カンマ区切り、$マークを先頭に付ける)
     function yLabelFormat($aLabel) {  //$aLabelは、任意の変数名。Y軸ラベル値との関係は自動的に取ってくれます。
       return "$". number_format($aLabel);      //return で値を返します
      } 
*6:Y軸目盛マークの表示の仕方
 例1. $graph->yaxis->SetTickSide(SIDE_LEFT); // Y軸の場合
   (縦軸の場合)
     ・SIDE_LEFT:軸の左に表示
     ・SIDE_RIGHT:軸の右に表示
   (水平軸の場合)
     ・SIDE_TOP:軸の上に表示
     ・SIDE_BOTTOM:軸の下に表示
 例2. $graph->xaxis->SetTickSide(SIDE_TOP); // X軸の場合
*7:Y軸グリッド線の間を交互に色で飾る
 例. $graph->ygrid->SetFill(true,'#EFEFEF@0.5','#BBCCFF@0.5'); //@0.5は、50%ブレンドの意
    $graph->ygrid->Show();              //Y軸グリッド線を描く
*8:Y軸ラベルの位置づけを行なう
 例. $graph->yaxis->SetLabelAlign('right','top');
     第1パラメータ:軸ラベルの水平方向の配置。 left/center/right 
   第2パラメータ:軸ラベルの垂直方向の配置。 top/center/bottom
*9:Y軸ラベルの傾きを決める
 例. $graph->yaxis->SetLabelAngle(45); //パラメータは0〜90の角度。SetFontと併用します。
    $graph->yaxis->SetFont(FF_ARIAL,FS_NORMAL,10); //Y軸ラベルのフォント
*10:日本語の扱いやTrueTypeフォントについて
  ・日本語を使用する場合は、必ずUTF-8へコード変換します。
   例.
          $title=utf8_conv($title);  //UTF-8変換サブルーチンコール

          //UTF-8変換
          function utf8_conv($p){
            $cd = "EUC-JP";  //mb_detect_encoding($p)を使うと結果がおかしい場合がある。
                  //このスクリプトのテキストエディターでの作成文字コード(EUC-JP/SJIS)に合わます。
            $rp = mb_convert_encoding($p, "UTF-8", $cd);
            return $rp;
          }
  ・TrueTypeフォントの使用方法について
   例.
    $graph->title->SetFont(FF_MINCHO,FS_NORMAL,13); //日本語
    $graph->yaxis->SetFont(FF_ARIAL,FS_NORMAL,10);  //非日本語
    フォントを使用する場合は、JpGraphで定義された定数FF_XXX(フォント)、FS_XXX(スタイル)を
    用います。詳細は、2.1 JpGraphのインストール参照。
*11 ラインプロットマークの型 
 例1.$lineplot->mark->SetType(MARK_IMG_DIAMOND,5,0.6); //JpGraphビルトインマーク(内臓マーク)
    第2パラメータ:色名または色番号 5:purple 。 第3パラメータ:大きさの割合。1.0 は実の大きさ。
 例2.$lineplot2->mark->SetType(MARK_FILLEDCIRCLE ); //MARK_FILLEDCIRCLE(単純なマーク)
    $lineplot2->mark->SetFillColor("red"); //MARK_FILLEDCIRCLEの色付け
 例3.$lp5->mark->SetType(MARK_FLAG1,'sweden');  //国旗(詳細は、JpGraphのマニュアル参照)

   ラインプロットマークのかたちには、the first classの単純なマークとthe second classの内臓マークがあります。
   the first classは、色が自由に変えられますが、the second classは、色が決められています。
the first classの単純なマーク
 
MARK_SQUARE:塗り四角形 
MARK_UTRIANGLE:上向きの三角形 
MARK_DTRIANGLE:下向きの三角形 
MARK_DIAMOND:ダイヤモンド型 
MARK_CIRCLE:円形 
MARK_FILLEDCIRCLE:塗り円形 
MARK_CROSS:十字型 
MARK_STAR:星型 
MARK_X:X 文字 
MARK_FLASH:フラッシュ型 
MARK_IMAGE:外部ファイルを使用する場合の画像形式 
MARK_FLAG:国旗 MARK_FLAG1, MARK_FLAG2, 
      MARK_FLAG3, MARK_FLAG4 の1つを使用
実例.上から順にMARK_SQUAREからMARK_FLASHに対応しています


MARK_CIRCLE,MARK_CROSS,
MARK_STAR,MARK_X,MARK_FLASH
は、色が付かない?

the second classのJpGraph内臓マークと規定の色
MARK_IMG_PUSHPIN,
MARK_IMG_SPUSHPIN
プッシュピン型画像
red,blue,green,pink,orange
MARK_IMG_LPUSHPIN
大サイズのプッシュピン型画像
red,blue,green,pink,orange
MARK_IMG_BALL, MARK_IMAGE_SBALL
丸い 3D ボール
bluegreen,cyan,darkgray,greengray,
gray,graypurple,green,greenblue,lightblue,
lightred,navy,orange,purple,red,yellow
MARK_IMAGE_MBALL
中サイズの丸い 3D ボール
blue,bluegreen,brown,cyan, darkgray,
greengray,gray,green, greenblue,lightblue,
lightred, purple,red,white,yellow
MARK_IMAGE_LBALL
大サイズの丸い 3D ボール
blue,lightblue,brown,darkgreen, green,
purple,red,gray,yellow,silver,gray
MARK_IMAGE_SQUARE
3D 正方形
bluegreen,blue,green, lightblue,orange,purple,red,yellow
MARK_IMG_STAR
3D 星型
bluegreen,lightblue,purple,blue,green,pink,red,yellow
MARK_IMG_DIAMOND
3D ダイヤモンド型
lightblue,darkblue,gray, blue,pink,purple,
red,yellow
MARK_IMG_BEVEL
3D 傾斜型
green,purple,orange,red,yellow
実例.
上から、MARK_IMG_PUSHPIN〜MARK_IMG_BEVELに対応しています。
10個目(MARK_FLASH)は関係ありません。

MARK_IMAGE_MBAL、MARK_IMAGE_LBALL、MARK_IMAGE_SQUAREは、
マークの表示が出来ません


これらは、すべてMARK_IMG_ にすると表示出来ます。(IMAGE→IMG バグ?)

例.
 $lp4->mark->SetType(MARK_IMG_MBALL,'red'); // OK
 //$lp4->mark->SetType(MARK_IMAGE_MBALL,"orange" ); // NG(表示しない)
4.折れ線グラフサンプルその2(繰り返し処理の方法)        実用的なグラフを作成する場合は、グラフに表示するデータ等はデータベース等ファイルから    データを読み込み、表示データをフッファー(配列)に溜め込んだ後(表示データの編集)、    繰り返し処理をする必要があります。    表示データの編集は、複数データの折れ線グラフを作成する場合、具体的には次のことを行ないます。
▽例.3ヶ月の地域別平均温度
地域4月5月6月
東京202326データ1
長野151820データ2
札幌101517データ3
   @ 地域別平均温度データファイルを読み込む(@〜Cは、考え方を説明しています)    A 1データ毎にY軸データを配列に作成する       例. $datay1 = array(20,23,26); $datay2 = array(15,18,20); $datay3 = array(10,15,17);    B 1データ毎のY軸データの配列を配列に作成する(配列の配列)      例. $ydata_array = ($datay1,$datay2,$datay3);    C必要なら、Y軸目盛の最大値を自分で設定したい場合は、データ毎の最大値の配列を作成する      例. $ydata_max = (max($datay1),max($datay2),max($datay3)); (後で、max($ydata_max) で全体の最大値を得る)          以上データベール等ファイル読み込み処理(表示データの編集)    D 1データ毎に折れ線グラフをプロットする(グラフを描く)      例. $graph = new Graph(500,400,"auto"); //グラフオブジェクトの生成 ・・・ $yline_color = array ("red","blue","green","orange","violet","brown","pink"); //色の配列 //7色。線の色用。8データ以上はサイクリックに使用。 $color_no = count($yline_color); //色定義の数 $disp_plot = array(); //Plot OBJ 生成用配列定義 $line = array(); //1データ用作業用配列定義 $i=0; foreach($ydata_array as $line){ //繰り返し処理 $disp_plot[$i] = new LinePLot($line); //1データ毎にPlot OBJのを生成 ・・・ $c = $i%$color_no; //余りを添え字にする。8データ以上はサイクリックに使用のため。 $disp_plot[$i]->SetColor($yline_color[$c]); //折れ線の色 ・・・ $graph->Add($disp_plot[$i]); //グラフにプロットを追加する $i++; } $graph->Stroke(); //グラフを出力する
(1) 繰り返し処理折れ線グラフ作成サンプルPHPソースとそのグラフ画像
     ・ソース:>>ソース(文字コード:EUC)
     ・グラフ:

(2) 繰り返し処理積み上げ折れ線(面)グラフ作成サンプルPHPソースとそのグラフ画像
     ・ソース:>>ソース(文字コード:EUC)
     ・グラフ:
5.グラフでないグラフ〜キャンバスグラフの作成方法(自由描画)    キャンパスグラフは、いわゆるグラフではありません。 キャンパスグラフは、自由な形状(arbitrary shapes)を   描くことができます。   自由な形状には、ベジエ曲線(Bezier)、サークル(円)(Circle)、ポリゴン(多角形)(Polygon)、矩形/丸みのある矩形   (Rectangle/RoundedRectangle)、くぼみのある矩形(IndentedRectangle)、線やテキストを描くことができます。   自由な形状を描く場合、グラフのフィールド(プロットエリア)のTOP LEFT(左上)(x,y)=(0,0)を基点とした   x,y値(座標)を指定します。   このx,y値(座標)の指定には、異なった2つの方法があります。   1つは、グラフのフィールド(プロットエリア)の絶対ピクセル座標を用いる方法です。    例.include "jpgraph.php"; //必須      include "jpgraph_canvas.php"; //キャンバスグラフモジュール      $g = new CanvasGraph(400,300,'auto');    例の場合、絶対ピクセル座標の大きさは(x,y)=(0,0)(TOP LEFT)から(x,y)=(399,299)(BOTTOM RIGHT)になります。   もう1つは、ピクセル座標を扱いやすい小さな任意な数値のスケールで再定義し、自分のスケール座標を作ります。    例.include "jpgraph.php"; //必須      include "jpgraph_canvas.php"; //キャンバスグラフモジュール      include "jpgraph_canvtools.php"; //キャンバスツールモジュール(スケールを用いる場合必須)      $g = new CanvasGraph(400,300,'auto');      $ymax=20; $xmax=20; //スケールの最大値(適宜定めます)      $scale = new CanvasScale($g); //スケールオブジェクトの生成      $scale->Set(0,$xmax,0,$ymax); //スケールを設定するTOP Left(0,0)→BOTTOM RIGHT(20,20)のスケール    例の場合、スケール座標の大きさは(x,y)=(0,0)(TOP LEFT)から(x,y)=(20,20)(BOTTOM RIGHT)になります。  5.1 キャンバスグラフサンプル1(スケール座標を用いる)    キャンバスグラフを作成する場合、EXCELシートに同じ大きさ(ピクセル)の枠(スケール座標)を作り、    イメージを下書きすると良いでしょう。
図2 イメージの下書き例(Excel使用)
※形状を描くメソッド一覧
7. CanvasRectangleText(一部)
  7.1 CanvasRectangleText
  7.4 Set
  7.6 SetColor
  7.8 SetFillColor
  7.9 SetFont
  7.10 SetFontColor
  7.14 Stroke
8. CanvasScale(一部)
  8.1 CanvasScale
  8.2 Set
61. Shape
  61.1 Bezier
  61.2 Circle
  61.3 FilledCircle
  61.4 FilledPolygon
  61.5 FilledRectangle
  61.6 FilledRoundedRectangle
  61.7 IndentedRectangle
  61.8 Line
  61.9 Polygon
  61.10 Rectangle
  61.11 RoundedRectangle
  61.12 SetColor
  61.13 SetTextAlign
  61.14 ShadowRectangle
  61.15 Shape
  61.16 StrokeText

(項数字は、マニュアルに対応)

※左図内の変数名は、サンプルPHPで
 用いているものです
   ■サンプルPHPソース(canvas1-sample.php)     
サンプルPHPのキャンバスグラフ(gif)
サンプルPHPソース(canvas1-sample.php)
<?php
// $Id: canvas_jpgarchex.php,v 1.3 2002/08/29 10:14:19 aditus Exp より流用
include "../jpgraph.php";           //必須
include "../jpgraph_canvas.php";    //キャンバスグラフモジュール
include "../jpgraph_canvtools.php"; //キャンバスツールモジュール(スケール使用の場合)

// 基本的なキャンバスを設定する
$g = new CanvasGraph(400,400,'auto'); //キャンバスオブジェクトの生成
$g->SetMargin(2,3,2,3);               //プロットエリアの枠のマージン
$g->SetMarginColor("gray");           //マージンカラー
$g->InitFrame();                      //プロットエリアとマージンを描く

// 作業用スケールを設定する TOP Left(0,0)→BOTTOM RIGHT(20,20)
// 絶対座標は、TOP Left(0,0)→BOTTOM RIGHT(399,399)
$ymax=20; $xmax=20;
$scale = new CanvasScale($g);  //スケールオブジェクトの生成
$scale->Set(0,$xmax,0,$ymax);  //スケールを設定するTOP Left(0,0)→BOTTOM RIGHT(20,20)のスケール

// 矩形などを描くための形状オブジェクトを生成する
$shape = new Shape($g,$scale); //形状オブジェクトを生成
$shape->SetColor('black');     //描く線の色
// イメージの全体的なパラメータ値
$l = 2;      // Left margin(x)
$r = 6;      // 最下位行の行番号(y)(GD ベーシック ライブラリの矩形を基点)
$width = 16; // 全体の幅
// 基本的な丸みのある矩形とテキスト(RectangleText)のオブジェクトを生成する
$tt = new CanvasRectangleText();      //オブジェクトの生成
$tt->SetFont(FF_MINCHO,FS_NORMAL,11); //テキストのフォント(日本語)
$tt->SetFillColor('');                //矩形面の色
$tt->SetColor('');                    //矩形のボーダーカラー
$tt->SetFontColor('navy');            //テキストの色
$t = new CanvasRectangleText();       //オブジェクトの生成
$t->SetFont(FF_ARIAL,FS_NORMAL,12);   //テキストのフォント
$t->SetFillColor('goldenrod1');       //矩形面の色 goldenrod:#DAA520
$t->SetFontColor('navy');             //テキストの色

// GD ベーシック ライブラリとイメージライブラリの矩形を描く
$h=3; $s = 3; $d=$l + $width-9;  //h:高さ s:1矩形のWidth d:TTF矩形のTOP LEFTのx値
$t->SetFillColor('cyan');        //矩形面の色(再定義)
$t->Set("TTF",$d,$r+2,$s,1); $t->Stroke($g->img,$scale);  //$scale OBJへStroke必要
       //TOP LEFTからの座標(9,8)を基点に長さ3、高さ1の矩形とテキストTTFを描く
$t->Set("PNG",$d+$s,$r+2,$s,1); $t->Stroke($g->img,$scale);
       //TOP LEFTからの座標(11,8)を基点に長さ3、高さ1の矩形とテキストPNGを描く
$t->Set("JPEG",$d+2*$s,$r+2,$s,1); $t->Stroke($g->img,$scale); 
       //TOP LEFTからの座標(14,8)を基点に長さ3、高さ1の矩形とテキストJPEGを描く
$shape->IndentedRectangle($l,$r,$width,$h,$s*3,1,2,'lightgreen');  //$shape OBJの場合、ここではStroke不要
       //TOP LEFTからの座標(l,r)=(2,6)を基点に長さ16、高さ3の矩形に
       // 長さ9、高さ1のくぼみを右下(2:bottom right)に付けライトグリーンで描く
       // くぼみの位置:0=Top left, 1=top right, 2=bottom right, 3=bottom left  
$tt->Set(utf8_conv("GD ベーシック ライブラリ\n(1.8.x or 2.x)"),$l,$r,$width,$h-1); 
       //TOP LEFTからの座標(2,6)を基点に長さ16、高さ2の矩形とテキストを描く(上書き)
       // テキスト"GD ベーシック ライブラリ\n(1.8.x or 2.x)"は、UTF-8にコード変換。\nは改行。
       // ただし、面の色及びボーダカラーは、上書きのためNULLを指定する。
$tt->Stroke($g->img,$scale); //$ttの矩形とテキストを描く

// Image primitives及びImage Cache &\nStreamingの矩形を描く
$t->SetFillColor('goldenrod1'); //矩形面の色(再定義)
$h = 2; $r -= $h; //h:高さ r:$r=6-2=4(y)
$t->Set("Image primitives\n(RGB, Anti-aliasing,\nGD Abstraction)",$l,$r-0.5,$width*0.5,$h+0.5);
     //TOP LEFTからの座標(2,3.5)を基点に長さ8、高さ2.5の矩形とテキストを描く
     // テキストは、"Image primitives\n(RGB, Anti-aliasing,\nGD Abstraction)"
$t->Stroke($g->img,$scale);
$t->Set("Image Cache &\nStreaming",$l+0.5*$width,$r,$width*0.4,$h);
     //TOP LEFTからの座標(10,4)を基点に長さ16×0.4=6.4、高さ2の矩形とテキストを描く
     // テキストは、"Image Cache &\nStreaming"
$t->Stroke($g->img,$scale);
//3つの円を重ねて描く
$shape->SetColor('red');       //1 赤色
$shape->FilledCircle(10,14,3); //TOP LEFTからの座標(10,14)を中心に直径3の円を描く
$shape->SetColor('green');     //2 緑色
$shape->FilledCircle(10,14,2); //TOP LEFTからの座標(10,14)を中心に直径2の円を描く
$shape->SetColor('blue');      //3 青色
$shape->FilledCircle(10,14,1); //TOP LEFTからの座標(10,14)を中心に直径1の円を描く
//円の中心に十字(線)を描く
$shape->SetColor('navy');     //3 ネービー色
$shape->Line(10,10,10,18); //TOP LEFTからの座標(10,10)から(10,18)まで線を描く
$shape->SetColor('navy');
$shape->Line(2,14,18,14); //TOP LEFTからの座標(2,14)から(18,14)まで線を描く
//左側にネット模様を描く
$y=0;
for($i=0; $i<$ymax; $i++){
 $shape->SetColor('green');
 $shape->Line(0,$y,$y,$xmax);
$y++;
}
//

$g->img->SetImgFormat("gif");  //画像の種類を明示的に指定する。jpeg/gif/png

// グラフ出力
$g->Stroke();
//

 //UTF-8変換
function utf8_conv($p){
 $cd = "EUC-JP";  //mb_detect_encoding($p)を使うと結果がおかしい場合がある。
                  //このスクリプトのテキストエディターでの作成文字コード(EUC-JP/SJIS)に合わます。
 $rp = mb_convert_encoding($p, "UTF-8", $cd);
 return $rp;
}

?>
 5.2 キャンバスグラフサンプル2(形状いろいろ)(スケール座標を用いる)
キャンバスグラフサンプル2(形状いろいろ)グラフ(gif)shape-sample.php >>ソース(EUC)
・プロットアリアのサイズ
 $g = new CanvasGraph(400,300);
・スケール座標の大きさ
 $scale = new CanvasScale($g);
 $xmax=40; $ymax=30;
 $scale->Set(0,$xmax,0,$ymax);
・形状オブジェクトの生成
 $shape = new Shape($g,$scale);
 $shape->SetColor('black');
・背景のグリッドは、Lineメッソド(線)で描いています。
 x=40,y=30のグリッドでサンプルのスケール座標に同じ。
・ベジエ曲線
 $p = array(13,10,16,13,16,7,18,8); //4点を配列で指定
 $shape->SetColor('red'); 
 $shape->Bezier($p);
 ベジエ曲線は、4点を指定し曲線が描かれます。
 カーブの基点(13,10)→ポイント1(16,13)→ポイント2(17,7)
               →カーブの終点(18,8)
 ポイント1(16,13)、ポイント2(17,7)は、カーブ(曲線)上
 にはありません。
・無色の円(面は無色。ボーダーが有色。)
 $shape->SetColor('red');       //ボーダー色
 $shape->Circle(6,24,3);        //中心x,y=(6,24) 半径3の円
・有色の円(面が有色)
 $shape->SetColor('orange');    //面の色
 $shape->FilledCircle(24,24,4); //中心x,y=(24,24) 半径4の円
・ポリゴン(多角形)
 $p = array(3,6,3,3,5,3,7,4,5,10); //5点を配列で指定
 $shape->SetColor('blue'); 
 $shape->FilledPolygon($p);
・矩形
 $shape->SetColor('green'); 
 $shape->FilledRectangle(22,8,26,14); //TOP_LEFT(22,8) とBOTTOM_RIGHT(26,14)を指定
・丸みのある矩形
 $shape->SetColor('green'); 
 $shape->FilledRoundedRectangle(32,8,36,14); //TOP_LEFT(32,8) とBOTTOM_RIGHT(36,14)を指定
・影のある矩形
 $shape->ShadowRectangle(32,20,36,26,"red",0.5);  //TOP_LEFT(32,20) とBOTTOM_RIGHT(36,26)を指定
                                                   //第5パラメータで色を、次に影の長さを指定
    キャンバスグラフサンプル2(形状いろいろ)のグラフをピクセル座標で描いたグラフ画像とPHPソース      ・
ピクセル座標で描いたグラフ画像(gif)      ・ピクセル座標で描いたグラフのPHPソース(EUC)       なお、ピクセル座標の場合ベジエ曲線が描けませんでした。 6.アンチスパムイメージの作成方法   コミュニティ版JpGraph 1.19版(2005.7.26)より、 アンチスパムイメージの作成が可能になりました。   JpGraph 1.19版ダウンロードファイル同梱の例題antispamex01.phpを引用し、その作成方法を説明します。   アンチスパムイメージ(アンチスパム画像 anti spam image)の生成には次の2通りの方法があります。   ・生成ストリングを自動生成する    例. $auto_chars = $spam->Rand(6); //6文字(桁)のストリングを生成する。Randメソッドで文字数を指定します。   ・生成ストリングを特定する    例. $spam -> Set("abcdefg"); //Setメソッドで生成したいストリングを指定します。       日本語、0(数字ゼロ)やo(英字オー)は使用できません。   アンチスパムイメージ作成サンプルPHPソースとその画像を以下に記述します。
アンチスパムイメージ作成サンプルPHPソースとその画像(jpeg)
<?php
// アンチスパム画像を作成する。2005.8.18
 // アンチスパムモジュール //
require_once "../jpgraph_antispam.php";
 // アンチスパム オブジェクト //
$spam = new AntiSpam();          //アンチスパム オブジェクトの生成
 // ストリングを設定する。//
//$auto_chars = $spam->Rand(6); $str="auto1";  //ストリングを自動生成する場合、生成ストリングの長さを指定。$strは単にファイル名に使用。
$str="abcdefg"; $spam -> Set($str); //生成ストリングを特定する場合。日本語、0(数字ゼロ)やo(英字オー)は使用できません。
 // アンチスパム画像を出力する。jpeg画像のみ対応。//
//if( $spam->Stroke("./tmp/antispam-$str.jpg") === false ) {    //ファイル出力の場合
if( $spam->Stroke() === false ) {                     //画面表示の場合
    die('Illegal or no data to plot');
}

?>
例1:画像認証デモ 5桁)
 
※英字は小文字で入れてください
 例:G→g

※単に、認証結果を別ウィンドウに表示します。
例2:ストリング自動生成(4桁)
 <img src="./v5/sample/antispamex01.php">
 

例5:アンチスパムイメージの作成デモ)
 
例3:生成ストリングを特定="abcdefg")
 
例4:ストリングを自動生成(6桁))
 
(注)アンチスパムイメージは、正しくはCaptcha(キャプチャ、"Completely Automated Public Turing test to tell Computers and Humans Apart";
コンピュータと人間を区別する完全に自動化された公開チューリングテスト)(画像認証)と言われています。

7.2次元コード-QRコードの作成方法(この章は、Jpgraphの機能の説明ではありません)

  コミュニティ版(フリー)のJpGraphでは、2次元コード-QRコードがサポートされていません。
  しかし、JpGraphが動作する環境であればJpGraphを使用せず、2次元コード-QRコードの作成は可能です。
  それは、QRコード作成PHPスクリプトを次のサイトからダウンロードすれば、QRコードを作成できます。
  
  ・swetake.com のQRコード・バーコード 
   →「QRcode Perl CGI & PHP scripts ver. 0.50」→ 「qr_img0.50g.tar.gz (930KB)」 

   ダウンロードファイル(qr_img0.50g.tar.gz)を解凍後、\qr_img0.50g\phpのqr_img.phpを起動し、QRコードが作成できます。
   
   (qr_img.phpのおもな仕様)
    ・モデル2のQRコード 
    ・QRコード化データ(以下はqr_img.phの起動パラメータです)
     @数字モード(0〜9の数字のみ)
     A英数字モード(すべてのアルファベットと数字と半角スペース、「$%*+-./:」が使用可能) 
     B8ビットバイトモード
      なお、漢字モードは非対応です。
    ・エラー修正レベル
     指定できるのはL,M,Q,Hの4種類で省略した場合 M が選択されます。
    ・モジュールサイズ
     指定できるのは1以上の整数でこの値でイメージのサイズが決定されます。
     省略した場合 4(png) または 8(jpeg) が選択されます。
    ・バージョン
     このプログラムで指定できるバージョンは1〜40です。省略した場合はプログラムが自動選択します。
    ・画像タイプ
     省略した場合PNGを出力します。jpegやhtmlモードを指定できます。

   (作成例)

    http://127.0.0.1/qr_img0.50g/php/qr_img.php?d=http://urbanqee.com/i/ (QRコード化データ以外省略)
     データ:http://urbanqee.com/i/

  (参考:携帯対応QRコード)

    携帯対応対応QRコードは、携帯各社のホームページから無料でQRコード作成ソフトをダウンロードできます。
    これらのQRコード作成ソフトは、GDなしで使用できます。また、データとして漢字モード(SJIS)を対応しています。
    ・ドコモiモード:バーコードツール「QRファクトリー」
     例. 携帯iモード対応QRコードQRファクトリー」
       データ:http://urbanqee.com/i/

    ・au EZweb:「2次元コードメーカー (QRコード作成ソフト)」
     例. EZweb対応QRコード「2次元コードメーカー (QRコード作成ソフト)」
       データ:http://urbanqee.com/i/

    ・SoftBank:QRコードエディター for Mobile(ダウンロードは会員登録が必要)
     例. SoftBank対応QRコード「QRコードエディター for Mobile」
       データ:http://urbanqee.com/i/
    
    ・Webで、QRコード無料作成(DoCoMo au SoftBank  対応)
     Q作くん - QRコード作成 


   ※「QRコード」は(株)デンソーウェーブの登録商標です。

8.JpGraph サンプル集(通常のグラフのサンプル313例)(ソースコード付き)

日本語版販売元アシアル社のJpGraph サンプル集(通常のグラフのサンプル)ページにあります。

9.JpGraph 日本語マニュアル

JpGraph マニュアルの構成は、以下のとおりです。これらは、ダウンロードするJpGraphファイルに同梱されています。

@コミュニティ版・プロフェッショナル版共通 JpGraph マニュアル
Aプロフェッショナル版 バーコード用 マニュアル
Bプロフェッショナル版 PDF417用 マニュアル
Cプロフェッショナル版 風配図用 マニュアル
Dプロフェッショナル版 走行距積算計用 マニュアル
Eプロフェッショナル版 関数リファレンス(英語)
共通 JpGraph マニュアル(日本語)および関数リファレンス(英語)は、以下より参照できます。

@共通 JpGraph マニュアル:日本語版販売元アシアル社のコミュニティ版・プロフェッショナル版共通 JpGraph マニュアルページにあります。

E関数リファレンス:日本語版販売元アシアル社のプロフェッショナル版 関数リファレンスページにあります。
  (関数リファレンスは、JpGraph マニュアル内で参照されています)

このページのTOPへ


(サイト内グラフ関連リンク)
NoタイトルGDと必要ソフトスクリプトOS
1 Perl(Active Perl5.6)でグラフを作成する ・Active Perl(5.6.1)
・GD(2.16)
・GD::Graph(1.43)
・GDTextUtil(0.86)
・jcode.pm(0.87)
Perl CGIWindows IIS
2 PHPで高機能なグラフ生成ライブラリーJpGraphを使ってグラフを描いてみました・・・ ・PHP(4.3.11)
・GD(2.0)(boutell)
・JpGraph(1.17)
PHPWindows IIS
3 簡単!XML/SWFでグラフを作成する−フラッシュグラフ作成1(HTML基本編) ・XML/SWF Chartsライブラリー
HTML,Perl,PHPWindows IIS等
4 簡単!HTMLで、amChartsライブラリーを用いてフラッシュグラフを作成する ・amChartsライブラリー
HTML,Perl,PHPWindows IIS等

HOME Profile BBS Chat Game Center GD Graph PDF Make ASP Apli Make MID FONT IE Filter Mini Bonsai Web Color List E-m@il
このページがお役立ちましたか? よろしければ、Web Clapを送信してください。
Web拍手とは
今までメールや掲示板を利用しないと伝えられなかったwebサイト(ホームページ)管理人への応援の気持ちを、 ボタン一つだけで伝えることを可能にするために開発された、webサイト管理人と閲覧者を繋ぐ最も簡単で、 全く新しいコミュニケーションツールです。

最終更新日:2007.1.31