google html

Google Chartsで簡単にグラフを作成

htmlでグラフを表示させるという機会はしばしばあると思いますが、
<img>要素で画像として書きだすことが殆どだと思います。

しかし、グラフの数値が動的に変化する場合は、JavaScriptなどで制御する
必要があり、1から作るとなるとなかなか面倒です。

そこで今回は気軽にグラフを生成するAPI「Google Charts」をご紹介致します。

 

 

Google Chartsで円グラフを作成

それでは早速、試しにグラフを作ってみたいと思います。
使い方は簡単で、<img>要素を以下のように記述するだけです。

 

 

<img src=”http://chart.apis.google.com/chart?
cht=p
&amp;chd=t:40,40,20
&amp;chs=400×200
&amp;chl=KINOKOHA|TAKENOKOHA|MUTOHA
&amp;chco=00,afda95
” alt=””>

 

 

上から、グラフの種類、項目の割合(%表示)、画像のサイズ、項目のラベル、グラフの色
と指定しています。
そして実際に表示されるのが以下になります。

 

 

このような基本的な円グラフに限らず、折れ線グラフ、棒グラフ、バブルチャート等も生成することが可能です。
詳しくは以下の公式サイトにて。

https://developers.google.com/chart/?hl=ja