Google Chart API で 円グラフを描いてみる
Web のページにグラフを表示したいことは多々あります。 方法も色々とあるのですが、 今回は Google Chart API を使って円グラフを描いてみます。
Google Chart API は 名前の通り、Google が提供する API です。 URL の引数としてデータを送ることで Google が画像を作成してくれます。 あとは、それを <img> タグの src 属性にセットするだけです。
次の図は 実際に Google Chart API で生成している画像です。
このような綺麗な円グラフを描くのは結構大変ですが URL でデータを渡すだけで Google さんが描いてくれるため 簡単で、しかも自分のサーバに負荷もかかりません。
HTML ソースは次のようになっています。
<img src="http://chart.apis.google.com/chart
?cht=p
&chtt=%E6%94%BF%E5%85%9A%E6%94%AF%E6%8C%81%E7%8E%87
&chd=t%3A65%2C20%2C10%2C5
&chl=%E2%97%8B%E2%97%8B%E5 (略) %E3%81%AE%E4%BB%96
&chs=250x150
&chco=bebeff%2Cbeffbe%2C999999
&chm=
&chf=a%2Cs%2Cffffff"
alt="政党支持率"
style="width:250px;height:150px;">
(表示の都合上、URL の途中で改行しています)
グラフ内の日本語をエンコードして持たせているので結構長くなっています。 パラメータの意味さえわかってしまえば、JavaScript で動的に URL を 生成することもできますし、手で描くこともできます。
例えば、1 つ目のパラメータは 図の種類ですが 「 cht=p 」を「 cht=p3 」にするだけで 次のような立体的な円グラフになります。 （横幅も変更しています）
もちろん円グラフだけでなく、折れ線グラフ、レーダチャート、ベン図、散布図、さらに QR コードまで作ることができます。
