背景及びグラフエリア(グラデーション)

広告

背景やグラフエリアの色の指定方法の1つでグラデーションで塗りつぶす方法を確認します。

書式は次の通りです。 

chf=
<対象>,lg,<角度>,<色1>,<オフセット1>,<色2>,<オフセット2>,<色n>,<オフセットn>|
<対象>,lg,<角度>,<色1>,<オフセット1>,<色2>,<オフセット2>,<色n>,<オフセットn>

パラメータ名「chf」に対して「対象」「lg」「角度」「色1」「オフセット1」「色2」「オフセット2」の順で指定します。背景とグラフエリアのどちらかだけでも指定できますが、両方指定する場合はパイプ(|)で区切り続けて記述します。

対象には背景かグラフエリアかを指定し、背景の場合には「bg」をグラフエリアの場合には「c」を指定します。

グラデーションは指定した2つ以上の色の間で徐々に色が変化していくものです。そこで基点となる位置を決めて色を指定します。位置を表すオフセットにはは0から1の間で指定し、左端が「0」、右端が「1」となります。そして角度には色が変化していく方向を0から90の間の数値で指定します。角度に90を指定した場合には下から上へ色が変化していきますのでオフセットは「0」が下端、「1」が上端となります。

具体的には次のように記述します。 

chf=c,lg,0,ffffff,0,0000ff,1

サンプルプログラム

では実際にサンプルを試してみます。

サンプル画像 

http://chart.apis.google.com/chart?
chs=300x300
&chd=t:10,15,4,60,45|30,23,73,24,87
&cht=lc
&chco=ff0000,0000ff
&chtt=Monthly+PageView
&chxt=x,y
&chxl=0:|2004|2005|2006|2007|2008|1:|Min|Max
&chf=bg,s,eeeeee|c,lg,0,ffffff,0,0000ee,1

サンプル画像 

http://chart.apis.google.com/chart?
chs=300x300
&chd=t:10,15,4,60,45|30,23,73,24,87
&cht=lc
&chco=ff0000,0000ff
&chtt=Monthly+PageView
&chxt=x,y
&chxl=0:|2004|2005|2006|2007|2008|1:|Min|Max
&chf=bg,s,eeeeee|c,lg,0,ffffff,0.2,0000ee,0.8

サンプル画像 

http://chart.apis.google.com/chart?
chs=300x300
&chd=t:10,15,4,60,45|30,23,73,24,87
&cht=lc
&chco=ff0000,0000ff
&chtt=Monthly+PageView
&chxt=x,y
&chxl=0:|2004|2005|2006|2007|2008|1:|Min|Max
&chf=bg,s,eeeeee|c,lg,45,ffffff,0,0000ee,1

サンプル画像 

http://chart.apis.google.com/chart?
chs=300x300
&chd=t:10,15,4,60,45|30,23,73,24,87
&cht=lc
&chco=ff0000,0000ff
&chtt=Monthly+PageView
&chxt=x,y
&chxl=0:|2004|2005|2006|2007|2008|1:|Min|Max
&chf=bg,s,eeeeee|c,lg,90,ffffff,0,0000ee,1

サンプル画像 

http://chart.apis.google.com/chart?
chs=300x300
&chd=t:10,15,4,60,45|30,23,73,24,87
&cht=lc
&chco=ff0000,0000ff
&chtt=Monthly+PageView
&chxt=x,y
&chxl=0:|2004|2005|2006|2007|2008|1:|Min|Max
&chf=bg,lg,0,ffffff,0,0000ee,1|c,lg,90,ffffff,0,ee0000,1

サンプル画像 

http://chart.apis.google.com/chart?
chs=300x300
&chd=t:10,15,4,60,45|30,23,73,24,87
&cht=lc
&chco=ff0000,0000ff
&chtt=Monthly+PageView
&chxt=x,y
&chxl=0:|2004|2005|2006|2007|2008|1:|Min|Max
&chf=bg,s,eeeeee|c,lg,0,ffffff,0,cccccc,0.5,ffffff,1

( Written by Tatsuo Ikura )