ホームページ作成/画像の表示・活用 (HTML,CSS,JavaScript)

円グラフをウェブ上で簡単に表示させる方法(2ページ目)

ウェブ上で「円グラフ」を表示させたいと思ったことはありませんか? 作成したい円グラフのデータをHTML中に1行記述するだけで、簡単に2次元・3次元円グラフを作成・表示できるサービスを使ってみましょう!

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

Google Chart API で円グラフを作成する方法

作成して欲しい円グラフのデータは、すべてURLに含めて、「Google Chart API」に送ります。
円グラフのデータは、以下のようなURLになるよう記述します。

http://chart.apis.google.com/chart?cht=《種類》&chd=t:《項目値》&chs=《画像サイズ》

最低限必要なのは、上記の3項目(種類・項目値・画像サイズ)です。
さらに、以下の情報を追加できます。

http://chart.apis.google.com/chart?cht=《種類》&chd=t:《項目値》&chs=《画像サイズ》&chl=《項目ラベル》&chco=《色》&chf=《背景色》

項目ラベル・色・背景色は、必要に応じて追加できます。不要な場合は記述を省略して構いません。 具体的には、以下のように記述します。

円グラフを作成する最低限の指定

■円グラフの種類:

「 cht=p3 」で、立体的な(3次元の)円グラフを作成します。
「 cht=p 」で、平面的な(2次元の)円グラフを作成します。
円グラフで指定できる種類は、上記の2つのみです。
立体的な円グラフを作成したい場合は、以下のように記述します。

http://chart.apis.google.com/chart?cht=p3

■円グラフの項目値:

円グラフですから、最低2項目の値が必要です。
値は半角数字で記述し、値と値の間は半角カンマ記号で区切ります。
例えば、「60」と「40」を指定したい場合は、以下のように記述します。「t:」の記述を忘れないようにして下さい。

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40

※値の合計が100になるように記述しなくても大丈夫です。「 chd=t:7,1 」のような記述でも表示されます。

■円グラフの画像サイズ:

作成する画像のサイズ(表示サイズ)を指定する必要があります。
値は「横」・「縦」の順でピクセル数を半角数字で記述し、半角英字「x」で区切ります。
例えば、横400ピクセル×縦150ピクセルで作成したい場合は、以下のように「400x150」と記述します。

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

※縦横の最大値はそれぞれ1000です。ただし、最大面積が300,000ピクセルなので「1000x1000」は指定できません。「1000x300」や「300x1000」・「600x500」など、面積が300,000以下であれば指定可能です。

上記の3項目が必須です。(どれも省略はできませんが、記述順は異なっても構いません。)
このURLで円グラフを作成させると、以下のように表示されます。

円グラフのサンプル(背景グラデーション)
 

色を指定していないため、オレンジ色を基準にして表示されます。
項目ラベルを指定していないので、シンプルな円グラフになっています。

それでは最後に、「項目ラベル」や「色」・「背景色」の指定を加えてみましょう。

  • 前のページへ
  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます