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

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

円グラフのサンプル
▲作成できる円グラフの例(※3次元の円グラフで、項目の色を個別に指定)

■面倒な方法:
ウェブ上に円グラフを表示させたい場合、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を使って円グラフを作成すると、下図のようになります。

円グラフのサンプル(項目が2つだけの場合)
▲項目が2つだけの円グラフ(※色を指定していないので、デフォルトの橙色で表示)

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

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

2次元の円グラフのサンプル
▲平面的な(2次元の)円グラフの例(※4項目の色を個別に指定した場合)

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

円グラフのサンプル(背景グラデーション)
▲背景をグラデーションにした円グラフの例

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