Pear::Image_Graph その５

Image_Graph ロ－ソク足 ファイル作成

それでは引き続き、Image_Graph ロ－ソク足 ファイル p_gra-cand-1.php を作成します。
作成ファイル内容は、
63Pear Village に戻り
左サイドナビ｢Pear::Image_Graph その５｣の中の
Image_Graph ロ－ソク足チャ－ト PHP ファイル
から見てください。

Image_Graph ロ－ソク足 基本ファイルとの差分

ロ－ソク足 基本ファイルにはロ－ソク足表示しかありませんでした。
ここではこのグラフに、予測最高気温と予測最低気温の２本の折線グラフを追加し、３種類のグラフを表示します。
予測最高気温折線
予測最低気温折線
ロ－ソク足
の順に表示していきます。
必ずこの順序に表示しないとうまくいきません。
ロ－ソク足 基本ファイルとの違いは、
設定したデ－タを表示するオブジェクト $Plot ⇒($Plot[0]～$Plot[2])
表示データオブジェクト $Dataset ⇒($Dataset[0]～$Dataset[2])
をそれぞれ３つにすることです。

追加表示データ作成

それでは、追加となる予測最高気温と予測最低気温の２本の折線グラフデ－タを作成していきます。
Pear が好きな factory( ) メソッドを使用して表示データ作成をします。
この dataset Factory method は 表示データ $Dataset objects を作成します。
$Dataset[0] = Image_Graph::factory('dataset');
$Dataset[0] -> setName('Forecast-Max');
このなかに、addPoint( )メソッド
書式は addPoint(X 軸の値, Y 軸の値) を使用して、1日 の予測最高気温を設定します。
予測最高気温が 27℃ ならば
$Dataset[0] -> addPoint(1,27);
のように設定します。
引き続き、2～4日のデ－タも設定します。
$Dataset[0] -> addPoint(2,27);
$Dataset[0] -> addPoint(3,26);
$Dataset[0] -> addPoint(4,28);
次ぎに予測最低気温も同じように設定します。
$Dataset[1] = Image_Graph::factory('dataset');
$Dataset[1] -> setName('Forecast-Min');
予測最低気温が 20℃ ならば
$Dataset[1] -> addPoint(1,20);
のように設定します。
引き続き、2～4日のデ－タも設定します。
$Dataset[1] -> addPoint(2,27);
$Dataset[1] -> addPoint(3,26);
$Dataset[1] -> addPoint(4,28);

ロ－ソク足表示データ修正

ロ－ソク足表示データオブジェクトは $Dataset から $Dataset[2] に変更していますので、 

  $Dataset[2] -> addPoint(1,array(
   'min'  => 21,
   'open' => 22,
   'close'=> 25,
   'max'  => 26));
  $Dataset[2] -> addPoint(2,array(
   'min'  => 20,
   'open' => 25,
   'close'=> 21,
   'max'  => 27));	
  $Dataset[2] -> addPoint(3,array(
   'min'  => 19,
   'open' => 21,
   'close'=> 24,
   'max'  => 25));
  $Dataset[2] -> addPoint(4,array(
   'min'  => 21,
   'open' => 24,
   'close'=> 27,
   'max'  => 28));

とします。

予測最高気温折線グラフ表示

予測最高気温折線グラフを表示します。 $Plot[0] = $Plotarea -> addNew('area', array($Dataset[0]));
$Plot[0] -> setLineColor('red');
折線の色は赤にしました。
予測最高気温のデ－タは $Dataset[0] に入れたんでしたね。

予測最低気温折線グラフ表示

予測最低気温折線グラフを表示します。 $Plot[1] = $Plotarea -> addNew('area', array($Dataset[1]));
$Plot[1] -> setLineColor('blue');
折線の色は青にしました。
予測最低気温のデ－タは $Dataset[1] に入れたんでしたね。

グリッドの設定

X 軸のグリッドを作成します。
書式は、
$GridX = $Plotarea -> addNew('line_grid', null,IMAGE_GRAPH_AXIS_X);
です。
addNew( ) メソッド使用して、グラフ欄 $Plotarea にグリッド仕様を設定し $GridX オブジェクトを作成します。
第２引数は、null のダミ－、なんでもいいようです
第３引数は、X 軸なら IMAGE_GRAPH_AXIS_X
を設定します。
そして、setLineColor('色')メソッドを使用して
$GridX->setLineColor('lightgray@0.1');
とすれば灰色半透明の X 軸グリッドが完成します。
今回は Y 軸にもグリッドを設定します。
$GridY = $Plotarea -> addNew('line_grid', null, IMAGE_GRAPH_AXIS_Y);
$GridY->setLineColor('lightgray@0.1');

ロ－ソク足グラフ表示

ロ－ソク足を設定したデ－タを表示するオブジェクトは今回は $Plot[2] としました。 よって、ロ－ソク足を表示するときの書式より
$Plot[2] = $Plotarea -> addNew( 'Image_Graph_Plot_CandleStick', array($Dataset[2]));
となります。 ロ－ソク足表示データオブジェクトは $Dataset[2] でしたね。

ロ－ソク足色設定

グラフの色オブジェクト $Fill を factory( ) メソッドを使用して作成します。
$Fill = Image_Graph::factory('Image_Graph_Fill_Array');
そして、
close 値 ＜ open 値 の時をロ－ソクの色を｢緑の透明色｣にしたければ
$Fill -> addColor('green@0.4', 'red');
close 値 ＞ open 値 の時をロ－ソクの色を｢赤の透明色｣にしたければ
$Fill -> addColor('red@0.4', 'green');
@ 以下の数値は小さいほど透明になります。
次ぎに、
$Plot[2] -> setFillStyle($Fill);
とすれば、ロ－ソク足の色設定は終わりです。

グラフタイトル、XY 軸設定

  1. グラフタイトル

    $Plot[2] -> setTitle( 'CandleStick Chart Daily 2017/6/1～4');
    とするとグラフタイトルを設定することができます。
    'CandleStick Chart Daily 2017/6/1～4'
    がタイトルとなります。 そして、 $Legend->setFontSize(10); とし、グラフタイトルのフォントサイズを 10px にします。

  2. X 軸

    $AxisX = $Plotarea -> getAxis(IMAGE_GRAPH_AXIS_X);
    とし、X 軸のオブジェクトを取得します。
    そして、
    $AxisX->setLabelInterval(1);
    とします。
    もし、X 軸の目盛りを一つ置きにしたいならば、
    $AxisX->setLabelInterval(2);
    とします。

  3. Y 軸

    $AxisY = $Plotarea -> getAxis(IMAGE_GRAPH_AXIS_Y);
    とし、Y 軸のオブジェクトを取得します。
    そして、
    $AxisY->setLabelInterval(2);
    とし、Y 軸の目盛りを一つ置きにします。
    さらに、
    Y 軸の最小値を 18 に
    $AxisY -> forceMinimum(18);
    Y 軸の最小値を 30 に
    $AxisY -> forceMaximum(30);
    にします。

できたグラフ画像を出力

ただ単に画面に出力したいならば、done() メソッドを使用して
$Graph->done();
で終わりです。
今回は、一旦画像ファイルを img フォルダに保存してから表示します。
フォルダ名とファイル名を $filename に設定し、
$filename = 'img/plot_cand-1.png';
$Graph -> done(array('filename' => $filename));
とし、IMG タグを出力すれば ok です。
echo "<img src = $filename>";

引き続き、Image_Graph ロ－ソク足 ファイルの動作確認をします。　


Image_Graph ロ－ソク足 CSV 読込ファイル作成　に進む
Image_Graph ロ－ソク足 基本ファイル作成-2　に戻る

63Pear Villageに戻る