円グラフをウェブ上で簡単に表示させる方法

円グラフを作成してくれるサービスを使う

ウェブ上で円グラフを表示させたいと思ったことはありませんか？
今回は、以下のような円グラフを簡単に作成・表示させる方法をご紹介いたします。

■面倒な方法：
ウェブ上に円グラフを表示させたい場合、Excelなどのソフトウェアを使って円グラフを作成し、それをキャプチャして画像化し、画像ファイルとして保存したものをアップロード……とすると、かなり面倒です。 円グラフの値を修正したくなった場合には、また1から作り直さなければならないため、メンテナンスにも手間がかかります。

■簡単な方法：
円グラフを作成・表示してくれる「Google Chart API」というサービスを利用すると、HTMLソース内に1行記述するだけで簡単に円グラフが作成できます。 数値はHTML内にテキストで記述しますから、値の修正も容易です。
また、円グラフはPNG形式の画像として得られるため、画像化などの加工作業は不要です。表示に特別なプラグインも要りません。

円グラフのデータをURLにするだけ

例えば、上記の円グラフであれば、img要素のsrc属性に以下のURLを指定するだけで作成・表示ができます。

http://chart.apis.google.com/chart?cht=p3&chd=t:35,30,25,10&chs=400x150&chl=Tokyo|Osaka|Nagoya|Hakata&chco=CC0000|CCCC00|00CC00|0000CC

上記のURLをブラウザのアドレス欄にコピーして表示させれば、円グラフが作成されて表示されることが分かります。
ウェブページ上に掲載するには、上記のURLを使ってimg要素を以下のように作り、HTML内に記述します。
※URLをimg要素に記述する場合は、「&」記号を「&」のように文字実体参照の形に変換して下さい。

<img src="http://chart.apis.google.com/chart?cht=p3&amp;chd=t:35,30,25,10&amp;chs=400x150&amp;chl=Tokyo|Osaka|Nagoya|Hakata&amp;chco=CC0000|CCCC00|00CC00|0000CC" width="400" height="150" alt="円グラフのサンプル">

このソースを表示させると、以下のように円グラフが表示されます。

上記の例ではURLが長くてややこしいと感じるかも知れませんが、記述内容を分解して考えれば特に難しくはありません。（次ページで解説）
なお、円グラフにする項目が2つだけであり、表示色を指定しない場合は、以下のように（比較的短く）記述できます。

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=400x150&chl=AAA|BBB

上記のURLを使って円グラフを作成すると、下図のようになります。

そのほかに作成できる円グラフ

立体的な（3次元の）円グラフのほか、平面的な（2次元の）円グラフも作成・表示可能です。

背景色の指定も可能で、単純に指定色で塗りつぶすほか、下記のようにグラデーションにもできます。

それでは、この「Google Chart API」を使って円グラフを作成する具体的な方法を見ていきましょう。