警告: この API は 2012 年に非推奨となり、2019 年 3 月 18 日に無効になりました。代わりに、積極的にメンテナンスされている Google Charts API を使用してください。

グラフのスタートガイド

このページでは、Chart API を使用してグラフを作成する基本的な方法について説明します。

Google Chart 利用ポリシー

Google Chart API で行える 1 日あたりの呼び出し回数に上限はありません。ただし、不正行為とみなす使用をブロックする権限を有しています。

概要

このドキュメントのグラフの表示

このドキュメント内のすべてのグラフ画像は、Chart API を使用してライブで生成されます。画像の URL を表示するには、次の手順を行います。

  • Firefox を使用している場合は、右クリックして、[画像を表示] または [プロパティ] を選択します。
  • Internet Explorer を使用している場合は、右クリックして [プロパティ] を選択します。

このドキュメントでは、URL を読みやすくするために、複数行で表示しています。 Google Chart API を使用している場合は、1 行に 1 つの URL を指定する必要があります。

Google Chart API は URL GET リクエストまたは POST リクエストに応じてグラフ画像を返します。API を使用すると、円グラフや折れ線グラフから QR コードや数式まで、さまざまなグラフを生成できます。グラフのデータ、サイズ、色、ラベルなど、グラフに関するすべての情報は URL に含まれます。（POST リクエストの場合は少し違いますが、今のところは気にしないでください）。

チャートを単純にするために、URL にグラフの種類、データ、サイズを指定するだけで済みます。この URL は、ブラウザに直接入力するか、ウェブページで <img> タグを使用して参照します。たとえば、円グラフは次のリンクにアクセスします。

https://chart.googleapis.com/chart?chs=250x100&chd=t:60,40&cht=p3&chl=Hello|World

 

上のリンクは、基本的な Chart API の URL の例です。すべてのグラフ URL の形式は次のとおりです。

https://chart.googleapis.com/chart?cht=<chart_type>&chd=<chart_data>&chs=<chart_size>&...additional_parameters...

すべての URL は https://chart.googleapis.com/chart? で始まり、その後にグラフのデータと外観を指定するパラメータが追加されます。パラメータは name=value ペアで、アンパサンド文字（&）で区切ります。? より後に任意の順序でパラメータを指定できます。すべてのグラフには、少なくとも cht（グラフの種類）、chd（データ）、chs（グラフのサイズ）のパラメータが必要です。ただし、追加オプションには他にも多くのパラメータがあり、グラフでサポートされている数だけ追加パラメータを指定できます。

上記の URL を詳しく確認しましょう。

URL コンポーネント

黄色の円グラフ

https://chart.googleapis.com/chart?
  cht=p3&
  chs=250x100&
  chd=t:60,40&
  chl=Hello|World
https://chart.googleapis.com/chart?
すべてのグラフ リクエストのベース URL です。
cht=p3
グラフの種類: 3D 円グラフ。
chs=250x100
グラフのサイズ（幅×高さ）。ピクセル単位で指定します。最大値はこちらをご覧ください。
chd=t:60,40
グラフのデータ。このデータは単純なテキスト形式ですが、他の形式もあります。
chl=Hello|World
スライスラベル。
&
パラメータはアンパサンドで区切ります。注: URL を HTML に埋め込む場合（たとえば、<img> タグの src 属性など）、パラメータ間の & は文字 &amp; に置き換える必要があります。これは、PHP またはその他の言語でページの HTML を生成する場合です。 ただし、ブラウザに URL を入力したり、コードで URL を呼び出したりする場合（PHP や Perl で URL を取得する場合など）は、& マークを使用する必要があります。

この URL をコピーしてブラウザに貼り付け、データをいくつか変更してみます（新しい値を追加するときは、カンマを追加することを忘れないでください）。新しいラベルを追加します（新しい値の前に | マークを付けます）。グラフを拡大表示する。

トップへ戻る

グラフの作成方法

画像グラフを作成する方法は、以下のとおりです。

  1. グラフの種類を決定します。グラフのリストについては、ギャラリーをご覧ください。グラフの種類は cht パラメータで指定します。グラフに含めるすべてのコンポーネント（軸、ラベル、背景など）をスケッチし、必要に応じて、さまざまなコンポーネントのピクセルサイズ（合計グラフサイズ、凡例サイズなど）を特定します。最初に、グラフの種類に関するドキュメントを注意深くよく読んでおかなければなりません。そうしないと、不快に感じるかもしれません。
  2. グラフデータの作成と書式設定データは、chd パラメータを使用して指定します。データに使用する形式を決定する必要があります。
    • データ形式を選択する。グラフデータには、読みやすいシンプルなテキスト形式を使用できますが、送信には多くのスペースが必要になります。送信方法がより小さくなりますが送信できる値の範囲が制限されます。
    • グラフに合わせてデータを拡大する必要があるかどうかを決定します。形式によって、サポートされる値の範囲が異なります。形式によって許容されるすべての値にわたってデータをスケーリングし、違いを明確にできます。これを行うには、使用しているデータ形式に合わせてデータをスケーリングするか、カスタム スケーリングのテキスト形式を使用します。
    • 必要に応じてデータをエンコードします。エンコードされた形式を選択した場合は、他の種類のエンコードに役立つ JavaScript が提供されています。
  3. グラフのサイズを指定します。グラフのサイズは、chs パラメータを使用して指定します。形式と最大値については、ドキュメントをご覧ください。
  4. パラメータを追加します。各グラフのドキュメントでは、使用可能なオプションのパラメータの一覧を示します。一般的なオプションとして、ラベル、タイトル、色などがあります。ラベルやタイトルのテキストはすべて UTF-8 でエンコードする必要があります。多くのパラメータでは複数の値を入力できます。たとえば、chm パラメータを使用すると、グラフ上の 1 つのデータポイントに図形を配置できます。chm パラメータを使用して複数のデータポイントに図形を配置できますが、これを行うには、URL に chm パラメータを複数回指定しないでください（例: 間違った: chm=square&chm=circle&chm=triangle）。複数の値を取るパラメータでは、同じパラメータ内の複数の値の間にカンマや縦線などの区切り文字を使用します。chm の場合はバーであるため、右: chm=square|circle|triangle のような形にします。複数のパラメータを指定する方法については、各パラメータの詳細をご覧ください。
  5. URL 文字列を作成します。URL は https://chart.googleapis.com/chart? で始まり、その後に必須パラメータ（cht、chd、chs）と省略可能なパラメータがすべて続きます。注: <img> タグで URL を使用している場合は、リンク内のすべての & 文字を &amp; に変更する必要があります。例: <img src="https://chart.googleapis.com/chart?chs=250x100&amp;chd=t:60,40&amp;cht=p3&amp;chl=Hello|World" />
  6. GET または POST を使用して画像を取得する。GET は、URL をブラウザに直接入力するか、<img> タグで使用するときに使用します。ただし、URL の長さは 2K に制限されているため、それ以上のデータがある場合や、血液の好みがある場合は、こちらで説明されているように、POST の使用を検討してください。
  7. クリック可能なリージョンを作成する。必要に応じてグラフのイメージマップを作成し、特定のグラフ要素へのハイパーリンクやクリック要素を追加することもできます。 詳しくは、グラフのイメージマップを作成するをご覧ください。

トップへ戻る

グラフの用語集

このドキュメントで重要な用語について説明します。

シリーズ
グラフ内の関連するデータセット。系列を構成する内容は、グラフの種類によって異なります。折れ線グラフでは、系列は 1 本の線で表示されます。円グラフでは、各エントリは 1 スライス、すべてのスライスは系列が連続します。棒グラフでは、一連のデータはすべて同じデータセットのすべての棒を表します。棒グラフのタイプに応じて、異なるシリーズを並べて表示するか、積み重ねることができます。次のグラフは、2 つのシリーズ（ダークブルーとライトブルー）のグループ化された棒グラフを示しています。
「猫」と「犬」の 2 つの系列を表す棒グラフ。
軸ラベル
各軸に沿った数値またはテキストの値。上のグラフでは、ラベルは「Jan,"Jane," "Mar,"0&&tt; "50," "100."」です。

グラフ コンポーネント

グラフの構成要素は次のとおりです。

グラフのさまざまな領域。
グラフ領域
シリーズアートが展示されているエリア。詳しくは、「グラフ コンポーネント」のサイドバーをご覧ください。
凡例
シリーズを説明するグラフ上の小さな領域。上のグラフでは、このセクションには「Cats」と「Dogs」が表示されます。
パラメータ
URL で使用される key = value ペア。たとえば、chxt=x の場合、chxt はパラメータ名、x はパラメータ値です。
GET と POST
グラフの URL を送信する方法は 2 つあります。GET は通常、ブラウザに URL を入力するか、それを <img> タグのソースとして行います。POST リクエストの作成は複雑ですが、より多くのデータを含めることができます。GET ではなく POST を使用する主な理由は、POST リクエストでは GET リクエストよりもはるかに多くのデータを使用できるためです（16,000 文字対 2,000 文字）。POST については、こちらをご覧ください。
パイプ文字
| 文字。パラメータ値の区切り文字（多くの場合、複数の値を分割する文字）として使用されます。カンマとアンパサンド（&）は、グラフの URL で区切り文字としても使用されます。
複合グラフ
2 種類のグラフを組み合わせて作成されたグラフです。たとえば、折れ線グラフと棒グラフや、ローソクダー マーカーを使った折れ線グラフなどです。複合グラフをご覧ください。

トップへ戻る

最適化

グラフの基本的な作成方法を学習したところで、使用できる最適化をいくつか紹介します。

POST を使用する場合

URL の長さは 2K に制限されているため、それよりも多くのデータがある場合、こちらで説明されているように、GET ではなく POST を使用する必要があります。GET は、グラフの URL をブラウザの URL バーに入力するとき、またはウェブページの <img> 要素のソースとして使用するときに使用します。POST には、PHP や PERL など、別の言語による追加のプログラミングが必要です。

JavaScript でグラフを作成する

Google Visualization API を使用して、画像グラフを作成できます。Google Visualization API は JavaScript ベースの API で、これを使用すると、データを作成、フィルタリング、操作したり、Google スプレッドシートやその他のサイトにクエリを実行したりできるようになります。Visualization API を使用してデータを作成し、Image Charts API を呼び出してページにグラフをレンダリングさせることができます。詳細については、汎用的な画像グラフのドキュメントをご覧ください。また、ビジュアリゼーション ギャラリーで、「画像」のマークが付けられた Google のグラフをご確認ください。