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 コードまで作ることができます。

Google サイト内検索

Amazonアソシエイト