背景及びグラフエリア(ストライプ)

背景やグラフエリアの色の指定方法の1つでストライプで塗りつぶす方法を確認します。

書式は次の通りです。

chf=
<対象>,ls,<角度>,<色1>,<幅1>,<色2>,<幅2>,<色n>,<幅n>|
<対象>,ls,<角度>,<色1>,<幅1>,<色2>,<幅2>,<色n>,<幅n>

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

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

ストライプは指定した2つ以上の色で繰り返し塗りつぶされます。それぞれの色でどれだけの幅を塗りつぶすのかを「0」から「1」の間で指定して下さい。「1」を指定した場合は全てのエリアを同じ色で塗りつぶします。そして角度にはストライプが繰り返されていく方向を0から90の間の数値で指定します。角度に90を指定した場合には下から上へストライプが繰り返されていきます。

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

chf=c,ls,0,ffffff,0.2,0000ff,0.2

サンプルプログラム

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

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,ls,0,ffffff,0.2,ffff99,0.2

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,ls,0,ffffff,0.1,ffff99,0.2

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,ls,90,99ffff,0.1,ffff99,0.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,ffffff|c,ls,0,eeeeee,0.1,dddddd,0.1,cccccc,0.1

AjaxTower