文宏ホームページ作成ガイド円グラフを作成してくれるサービスを使うウェブ上で円グラフを表示させたいと思ったことはありませんか?今回は、以下のような円グラフを簡単に作成・表示させる方法をご紹介いたします。▲作成できる円グラフの例(※3次元の円グラフで、項目の色を個別に指定)■面倒な方法:ウェブ上に円グラフを表示させたい場合、Excelなどのソフトウェアを使って円グラフを作成し、それをキャプチャして画像化し、画像ファイルとして保存したものをアップロード......とすると、かなり面倒です。円グラフの値を修正したくなった場合には、また1から作り直さなければならないため、メンテナンスにも手間がかかります。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要素に記述する場合は、「&」記号を「&amp;」のように文字実体参照の形に変換して下さい。alt="円グラフのサンプル">このソースを表示させると、以下のように円グラフが表示されます。上記の例ではURLが長くてややこしいと感じるかも知れませんが、記述内容を分解して考えれば特に難しくはありません。(次ページで解説)なお、円グラフにする項目が2つだけであり、表示色を指定しない場合は、以下のように(比較的短く)記述できます。http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=400x150&chl=AAA|BBB上記のURLを使って円グラフを作成すると、下図のようになります。▲項目が2つだけの円グラフ(※色を指定していないので、デフォルトの橙色で表示)そのほかに作成できる円グラフ立体的な(3次元の)円グラフのほか、平面的な(2次元の)円グラフも作成・表示可能です。▲平面的な(2次元の)円グラフの例(※4項目の色を個別に指定した場合)背景色の指定も可能で、単純に指定色で塗りつぶすほか、下記のようにグラデーションにもできます。API」を使って円グラフを作成する具体的な方法を見ていきましょう。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。