円グラフのオプションを指定する
■円グラフの項目ラベル：
円グラフには、項目ごとにラベルを付加できます。
ラベルは半角英数字で記述し、項目間は半角パイプ記号「|」で区切ります。
例えば、1つ目のラベルを「Tokyo」、2つ目のラベルを「Osaka」にする場合は、以下のように記述します。
http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=400x150&chl=Tokyo|Osaka
上記のURLで表示させると、下図のように見えます。
 |
■円グラフの色：
色を指定しない場合はオレンジ色を基準にして表示されますが、望みの色を指定することもできます。
1色だけ指定すると、その色を基準にして自動的に濃さが調節されて表示されます。 項目の数だけ複数色を指定することもできます。
色はHTMLで指定する場合と同様に16進数で記述します。ただし「#」記号は不要です。複数色を記述する場合は半角パイプ記号「|」で区切ります。
例えば、青色（0000FF）を基準にして表示させたい場合は、以下のように記述します。
http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=400x150&chl=Tokyo|Osaka&chco=0000FF
上記のURLで表示させると、下図のように見えます。
 |
例えば、円グラフの項目が3つある場合に、個別に色を指定したい場合は、以下のように記述します。
http://chart.apis.google.com/chart?cht=p3&chd=t:40,30,30&chs=400x150&chl=Tokyo|Osaka|Nagoya&chco=CC0000|CCCC00|00CC00
上記のURLで表示させると、下図のように見えます。
 |
■円グラフの背景色：
画像全体の背景に色を付加することもできます。その際、単色で塗りつぶすこともできますし、グラデーションにすることもできます。
例えば、背景を淡い黄色（FFFFCC）で塗りつぶしたい場合は、以下のように記述します。
http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=400x150&chl=Tokyo|Osaka&chco=0000FF&chf=bg,s,FFFFCC
「bg」は背景色の意味、「s」は塗りつぶしの意味で、最後の「FFFFCC」は16進数で記述した色です。それぞれ半角カンマ記号で区切って記述します。
上記のURLで表示させると、下図のように見えます。
 |
| ▲背景色を単色で塗りつぶした円グラフ |
■円グラフの背景色（グラデーション）：
背景色をグラデーションにしたい場合は、以下のように記述します。
http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=400x150&chl=Tokyo|Osaka&chco=0000FF&chf=bg,lg,0,F0FFF0,0,95FA95,1
「bg」は背景色の意味、「lg」はグラデーションの意味です。
その後、グラデーションの設定を、下記のように記述します。
chf=bg,lg,(A)角度,(B)色1,(B)純色位置,(C)色2,(C)純色位置
「(A)角度」には、「0」（水平）～「90」（垂直）の範囲で、グラデーションの角度を指定します。
「(B)色1,(B)純色位置」では、グラデーションの色1と、色が純色であるポイントを指定します。ポイントは「0」が右端、「1」が左端です。
「(C)色2,(C)純色位置」では、グラデーションの色2と、色が純色であるポイントを指定します。
※よく分からない場合は、先のURLをコピー＆ペースとして、いろいろ値を変えて試してみて下さい。
上記のURLで表示させると、下図のように見えます。
左端から右端へ水平に緑色のグラデーションが表示されています。
 |
| ▲背景色をグラデーションにした円グラフ |
※グラデーションの指定方法に関して詳しくは、「Google Chart APIのデベロッパーガイド」の線形グラデーション項目をご参照下さい。
おわりに
今回は、手軽に円グラフが作成できる「Google Chart API」の使い方をご紹介いたしました。 このAPIでは、円グラフの他にも様々な図が簡単に作成・表示できます。詳しくは、Google Chart APIのデベロッパーガイドページをご参照下さい。
