グラフ スタートガイド

このページでは、Chart API を使ってグラフを作成するための基本について説明します。

Google グラフの利用ポリシー

Google Chart API への 1 日あたりの呼び出し回数に制限はありません。ただし、Google は不正とみなされた使用をブロックする権利を有します。

概要

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

このドキュメントのすべてのグラフ画像は、Chart API を使ってリアルタイムで生成されています。画像の URL を表示する方法は次のとおりです。

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

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

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? で始まり、その後にグラフのデータと外観を指定するパラメータが続きます。パラメータは、アンパサンド文字（&）で区切った「名前=値」ペアです。? の後には任意の順序で指定できます。すべてのグラフには、少なくとも 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
グラフのサイズ（幅 x 高さ）（ピクセル単位）。最大値についてはこちらをご覧ください。
chd=t:60,40
グラフのデータ。このデータは単純なテキスト形式ですが、他の形式もあります。
chl=Hello|World
スライスのラベル。
&
パラメータはアンパサンド（&）で区切ります。注: <img> タグの src 属性など、HTML に URL を埋め込む場合は、パラメータ間の & を文字 &amp; に置き換える必要があります。これは、PHP などの言語でページの HTML を生成する場合も同様です。ただし、ブラウザで URL を入力する場合や、コードで URL を呼び出す場合（たとえば PHP や Perl で URL を取得する場合）は、& マークを使用する必要があります。

この URL をコピーしてブラウザに貼り付け、少し変更してみてください。たとえば、データに値を追加します（新しいデータ値の前には必ずカンマを追加してください）。新しいラベルを追加します（新しい値の前に | マークを付けます）。グラフを拡大します。

トップへ戻る

グラフの作成方法

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

  1. グラフの種類を指定します。グラフのリストについては、ギャラリーをご確認ください。グラフの種類は cht パラメータで指定されます。グラフに必要なすべてのコンポーネント（軸、ラベル、背景など）をスケッチし、必要に応じて、さまざまなコンポーネントのピクセル サイズ（グラフの合計サイズ、凡例のサイズなど）を決定します。最初に、使用するグラフの種類に関するドキュメントを注意深くお読みください。そうしないと、動作にストレスを感じる可能性があります。
  2. グラフのデータを作成して書式設定するデータは、chd パラメータを使用して指定します。データに使用する形式を決定する必要があります。
    • データ形式を選択する。グラフデータには、読みやすいシンプルなテキスト形式を使用できますが、送信には多くのスペースが必要です。または、いずれかのエンコード タイプを使用します。エンコード タイプの場合、送信は比較的小さくなりますが、送信できる値の範囲は制限されます。
    • グラフに合わせてデータを拡大縮小する必要があるかどうかを判断します。形式が異なれば、サポートされる値の範囲も異なります。違いを明確にするために、書式で許容される値の範囲全体に対応するようにデータをスケーリングできます。これを行うには、使用するデータ形式に合わせてデータをスケーリングするか、カスタム スケーリングのテキスト形式を使用します。
    • 必要に応じてデータをエンコードする。エンコード形式を選択した場合は、他のエンコード タイプで活用できる JavaScript を使用できます。
  3. グラフのサイズを指定します。グラフのサイズは、chs パラメータで指定します。形式と最大値については、ドキュメントをご覧ください。
  4. パラメータを追加する:各グラフのドキュメントには、使用可能なオプション パラメータが記載されています。一般的なオプションには、ラベル、タイトル、色などがあります。ラベルやタイトルのテキストはすべて UTF-8 でエンコードする必要があります。なお、多くのパラメータでは複数の値を入力できます。たとえば、chm パラメータを使用すると、グラフ上の単一のデータポイント上にシェイプを配置できます。chm パラメータを使用して複数のデータポイントに図形を配置できますが、その場合は URL 内で chm パラメータを複数回指定しないでください（例: 間違った: chm=square&chm=circle&chm=triangle）。代わりに、複数の値を取るパラメータで、同じパラメータ内の複数の値の間にカンマや縦棒などの区切り文字を使用します。 chm の場合はバーなので、次のようになります。RIGHT: 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 の長さは 2,000 までに制限されています。それよりも多くのデータがある場合や、血が好きそうな場合は、こちらで説明されているように、代わりに POST を使用することをおすすめします。
  7. クリック可能な領域を作成します。必要に応じて、グラフのイメージマップを作成して、特定のグラフ要素にハイパーリンクを追加したり、要素をクリックしたりすることもできます。詳しくは、グラフの画像マップの作成をご覧ください。

トップへ戻る

チャートに関する用語集

このドキュメントで使用する重要な用語をいくつか紹介します。

シリーズ
グラフ内の関連するデータセット。シリーズが何で構成されているかはグラフの種類によって異なります。折れ線グラフではシリーズは 1 本の折れ線になり、円グラフでは各エントリが 1 つのスライスになり、すべてのスライスがシリーズになります。棒グラフでは、1 つのシリーズは同じデータセットのすべての棒を表します。異なるシリーズは、棒グラフのタイプに応じて、横に並べてグループ化されるか、積み上げられています。次のグラフは、濃い青色と薄い青色に 1 つずつ、合計 2 つのシリーズがあるグループ化棒グラフを示しています。
Cats と Dogs の 2 つのシリーズを示す棒グラフ。
軸ラベル
各軸上の数値またはテキスト値。上のグラフの場合、「Jan」、「2 月」、「Mar」、「0」、「50」、「100」のラベルになります。

グラフ コンポーネント

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

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

トップへ戻る

最適化

グラフ作成の基本を学んできたところで、ここでは利用可能な最適化方法をいくつか紹介します。

POST を使用する場合

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

JavaScript でグラフを作成する

Google Visualization API を使うと、画像グラフを作成できます。Google Visualization API は JavaScript ベースの API で、データを作成、フィルタ、操作したり、Google スプレッドシートや他のサイトにデータをクエリしたりするためのツールを提供します。ビジュアリゼーション API を使用してデータを作成し、Image Charts API を呼び出してページ上にグラフをレンダリングできます。詳しくは、一般的な画像グラフのドキュメントをご覧ください。また、可視化ギャラリーで、（画像）とマークされた Google グラフをご確認ください。