棒グラフの色をグラデーションにする

広告

棒グラフの内部の色にはグラデーションを指定することが出来ます。指定するにはBarPlotクラスで用意されている「SetFillGradient」メソッドを使います。

Specify a gradient fill for the bars.

Parameter:
  $from_color  Start color
  $to_color  End color
  $style  Type of gradient

1番目と2番目の引数でグラデーションさせる2つの色を指定します。色の指定方法は『JpGraphにおける色の指定方法』を参照して下さい。

3番目の引数でグラデーションスタイルを指定します。指定可能なスタイルは次の通りです。

設定値スタイル
GRAD_VERVertical gradient
GRAD_HORHorizontal gradient
GRAD_MIDHORFrom the center and out, horizontal
GRAD_MIDVERFrom the center and out, vertical
GRAD_WIDE_MIDVERFrom the center and out, vertical. Wide mid section
GRAD_WIDE_MIDHORFrom the center and out, horizontal. Wide mid section
GRAD_CENTERFrom the center and beaming out
GRAD_LEFT_REFLECTIONSimulates a reflection on the left side
GRAD_RIGHT_REFLECTIONSimulates a reflection on the right side
GRAD_RAISED_PANELRaised panel with shadow

例えば次のように記述します。

$ydata1 = array(10, 4, 7, 9, 2, 3);

$barplot1 = new BarPlot($ydata1);

$barplot1->SetFillGradient("orange", "darkred", GRAD_VER);

サンプル

それでは実際に試して見ます。

sample6-1.php

<?php

include ("jpgraph/jpgraph.php");
include ("jpgraph/jpgraph_bar.php");

$graph = new Graph(250, 200, "auto"); 
$graph->SetFrame(true);
$graph->SetScale("textlin");

$graph->img->SetMargin(30, 30, 30, 30);

$ydata = array(10, 4, 7, 9, 1, 3);

$barplot = new BarPlot($ydata);
$barplot->SetWidth(0.8);
$barplot->SetFillGradient("orange", "darkred", GRAD_VER);

$graph->Add($barplot);

$graph->Stroke();
?>

上記のPHPファイルをブラウザで開いてみます。ブラウザには次のように表示されます。

棒グラフの色にグラデーションを設定する

先ほどのサンプルはグラデーションスタイルが「GRAD_VER」の場合ですが、それ以外のスタイルも試してみます。先ほどのサンプルでスタイルの部分だけを変更して実行した結果は次の通りです。

GRAD_HOR:

グラデーションスタイルをGRAD_HOR

GRAD_MIDHOR:

グラデーションスタイルをGRAD_MIDHOR

GRAD_MIDVER:

グラデーションスタイルをGRAD_MIDVER

GRAD_WIDE_MIDVER:

グラデーションスタイルをGRAD_WIDE_MIDVER

GRAD_WIDE_MIDHOR:

グラデーションスタイルをGRAD_WIDE_MIDHOR

GRAD_CENTER:

グラデーションスタイルをGRAD_CENTER

GRAD_LEFT_REFLECTION:

グラデーションスタイルをGRAD_LEFT_REFLECTION

GRAD_RIGHT_REFLECTION:

グラデーションスタイルをGRAD_RIGHT_REFLECTION

GRAD_RAISED_PANEL:

グラデーションスタイルをGRAD_RAISED_PANEL

( Written by Tatsuo Ikura )

関連記事 (一部広告含む)