折れ線グラフで線と線の間を塗りつぶす

折れ線グラフにおいて複数の系列のデータから線を表示した時に、線と線の間を塗りつぶす事が可能です。

書式は次の通りです。

chm=
b,<色1>,<開始系列1>,<終了系列1>,<未使用>|
b,<色2>,<開始系列2>,<終了系列2>,<未使用>|
b,<色n>,<開始系列n>,<終了系列n>,<未使用>

パラメータ名「chm」に対して「b」「色」「開始系列」「終了系列」をカンマ(,)で区切って指定します。複数設定する場合はパイプ(|)でつなげて続けて記述します。例えば次のように記述します。

chm=b,ff0000,0,1,0|b,0000ff,1,2,0

上記の場合は0番目の系列データから引いた線と1番目の系列データから引いた線の間を色「ff0000」で塗りつぶし、1番目の系列データから引いた線と2番目の系列データから引いた線の間を色「0000ff」で塗りつぶします。

また線が1つだけあり、X軸と線の間の領域を塗りつぶす場合は次の書式が使用できます。

chm=B,<色>,<0>,<0n>,<未使用>

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

chm=B,ff0000,0,0,0

サンプルプログラム

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

http://chart.apis.google.com/chart?
chs=300x300
&chd=t:100,100|67,39,78,62,75,30|37,17,48,22,45,10|0,0
&cht=lc
&chxt=x,y
&chm=b,eee8aa,0,1,0|b,f0e68c,1,2,0|b,daa520,2,3,0

上記では塗りつぶしを行うために上辺(100,100)と下辺(0,0)に線を引いています。

http://chart.apis.google.com/chart?
chs=300x300
&chd=t:15,80,65,70,40,20,60,30,50
&cht=lc
&chxt=x,y
&chm=B,ffb6c1,0,0,0

AjaxTower