htmlでグラフを表示させるという機会はしばしばあると思いますが、
<img>要素で画像として書きだすことが殆どだと思います。
しかし、グラフの数値が動的に変化する場合は、JavaScriptなどで制御する
必要があり、1から作るとなるとなかなか面倒です。
そこで今回は気軽にグラフを生成するAPI「Google Charts」をご紹介致します。
Google Chartsで円グラフを作成
それでは早速、試しにグラフを作ってみたいと思います。
使い方は簡単で、<img>要素を以下のように記述するだけです。
<img src=”http://chart.apis.google.com/chart?
cht=p
&chd=t:40,40,20
&chs=400×200
&chl=KINOKOHA|TAKENOKOHA|MUTOHA
&chco=00,afda95
” alt=””>
上から、グラフの種類、項目の割合(%表示)、画像のサイズ、項目のラベル、グラフの色
と指定しています。
そして実際に表示されるのが以下になります。
このような基本的な円グラフに限らず、折れ線グラフ、棒グラフ、バブルチャート等も生成することが可能です。
詳しくは以下の公式サイトにて。
