このページは Cloud Translation API によって翻訳されました。

ライブラリを読み込む

このページでは、Google Chart ライブラリを読み込む方法について説明します。

基本的なライブラリの読み込み

いくつかの例外を除き、Google グラフを使用するすべてのウェブページでは、ウェブページの <head> に次の行を含めます。

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
  google.charts.load('current', {packages: ['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  ...
</script>

この例の最初の行で、ローダ自体を読み込みます。いくつのグラフを描画する場合でも、ローダを読み込むことができるのは 1 回だけです。ローダを読み込んだ後、google.charts.load 関数を 1 回以上呼び出して、特定のグラフタイプのパッケージを読み込むことができます。

google.charts.load の最初の引数は、バージョン名または番号の文字列です。'current' を指定すると、Google Charts の最新の公式リリースが読み込まれます。次のリリースの候補を試す場合は、代わりに 'upcoming' を使用してください。一般的にこの 2 つの違いはほとんどなく、新しいリリースが進行中の場合を除き、完全に同じです。upcoming を使用する一般的な理由は、1 ～ 2 か月以内に Google がリリースする予定の新しいグラフの種類や機能をテストする場合です。（今後のリリースについては、Google のフォーラムで発表しています。グラフへの変更が問題なく許可されるかを確認するため、発表された時点でリリースを試してみることをおすすめします）。

上記の例では、corechart（棒、列、線、面、階段面、バブル、円、ドーナツ、複合、ローソク足、ヒストグラム、散布図）を表示することを前提としています。別のまたは追加のグラフタイプを使用する場合は、上記の corechart を適切なパッケージ名に置き換えるか追加します（例:{packages: ['corechart', 'table', 'sankey']}。パッケージ名は、各グラフのドキュメントページの「読み込み中」セクションで確認できます。

この例では、ウェブページのどこかに drawChart という名前の JavaScript 関数が定義されていることを前提としています。関数の名前は自由に指定できますが、グローバルに一意であり、google.charts.setOnLoadCallback の呼び出しで参照する前に定義してください。

注: 以前のバージョンの Google Charts では、上記とは異なるコードを使用してライブラリを読み込んでいました。新しいコードを使用するように既存のグラフを更新するには、ライブラリローダのコードを更新するをご覧ください。

基本的な読み込み手法を使用して円グラフを描画する完全な例を次に示します。

<head>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    google.charts.load('current', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      // Define the chart to be drawn.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Element');
      data.addColumn('number', 'Percentage');
      data.addRows([
        ['Nitrogen', 0.78],
        ['Oxygen', 0.21],
        ['Other', 0.01]
      ]);

      // Instantiate and draw the chart.
      var chart = new google.visualization.PieChart(document.getElementById('myPieChart'));
      chart.draw(data, null);
    }
  </script>
</head>
<body>
  <!-- Identify where the chart should be drawn. -->
  <div id="myPieChart"/>
</body>

詳細を読み込んでいます

まず、ローダ自体を読み込む必要があります。これは、src="https://www.gstatic.com/charts/loader.js" を使用する別の script タグで行われます。このタグは、ドキュメントの head または body に配置できます。また、読み込み中または読み込み完了後に、ドキュメントに動的に挿入することもできます。

<script src="https://www.gstatic.com/charts/loader.js"></script>

ローダが読み込まれたら、google.charts.load を自由に呼び出せます。ここでは、ドキュメントの head または body の script タグで呼び出すことができます。また、ドキュメントの読み込み中または読み込み完了後であれば、いつでも呼び出すことができます。

バージョン 45 では、追加のパッケージを読み込むために google.charts.load を複数回呼び出すことができますが、そうしない方が安全です。毎回同じバージョン番号と言語設定を指定する必要があります。

以前の JSAPI autoload URL パラメータを使用できるようになりましたが、このパラメータの値は厳密な JSON 形式と URL エンコードを使用する必要があります。JavaScript で jsonObject のエンコードを行うには、コード encodeURIComponent(JSON.stringify(jsonObject)) を使用します。

制限事項

v45 より前のバージョンを使用している場合、Google グラフの読み込み方法に関して、軽微でありながら重要ないくつかの制限があります。

google.charts.load は 1 回しか呼び出せません。ただし、必要なパッケージをすべて 1 回の呼び出しで列挙できるため、個別に呼び出しを行う必要はありません。
ChartWrapper を使用している場合は、ChartWrapper を使ってパッケージを自動的に読み込むのではなく、必要なすべてのパッケージを明示的に読み込む必要があります。
Geochart と Map Chart の場合、古いライブラリローダと新しいライブラリローダの両方を読み込む必要があります。繰り返しになりますが、これは v45 より前のバージョンでのみ行います。新しいバージョンでは行わないでください。
```
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
```

バージョンの名前または番号を読み込む

google.charts.load 呼び出しの最初の引数は、バージョン名または番号です。現時点では、特別なバージョン名が 2 つと、フリーズされたバージョンが複数あります。

現在: これは最新の公式リリース用で、新しいリリースを公開するたびに変更されます。このバージョンは十分にテストされ、バグがないことが理想的ですが、動作していることを確認できたら、特定のフリーズバージョンを指定することもできます。
今後: これは、現時点の公式リリースになる前の次のリリースを対象としており、まだテスト中です。このバージョンを定期的にテストして、このバージョンが公式リリースになる前に対処すべき問題があるかどうかをできるだけ早く把握できるようにしてください。

Google グラフの新しいバージョンがリリースされると、グラフの種類がまったく新しくなるなど、いくつかの大きな変更が行われます。その他の変更点は、既存のグラフの外観や動作の強化など、小さなものです。

多くの Google グラフ作成者は、グラフのデザインを思いどおりのものに微調整しています。クリエイターによっては、YouTube が今後どのような改善を行っても、チャートは決して変わらないと認識している方もいらっしゃるかもしれません。そのようなユーザー向けに、Google グラフの固定がサポートされています。

グラフの固定バージョンは番号で識別され、公式リリースに記載されています。フリーズされたバージョンを読み込むには、google.charts.load の呼び出し内の current または upcoming をフリーズされたバージョン番号に置き換えます。

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
    google.charts.load('43', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    ...
</script>

凍結バージョンは無期限に利用できますが、セキュリティ上の懸念がある凍結バージョンは廃止される可能性があります。通常、フリーズされたバージョンのサポートは提供されません。ただし、あまり役に立たないとして、新しいバージョンへのアップグレードをおすすめする場合を除きます。

設定を読み込む

google.charts.load の呼び出しの 2 番目のパラメータは、設定を指定するオブジェクトです。設定では、次のプロパティがサポートされています。

荷物

0 個以上のパッケージの配列。読み込まれる各パッケージには、一連の機能（通常はグラフの一種）をサポートするために必要なコードが含まれます。読み込む必要があるパッケージは、チャートの種類ごとにドキュメントに記載されています。ChartWrapper を使って必要なものを自動的に読み込む場合は、パッケージを指定せずに済みます。

language

グラフに含める可能性のあるテキストをカスタマイズする言語またはロケールのコード。詳しくは、言語 / 地域をご覧ください。

callback

パッケージが読み込まれたときに呼び出される関数。または、上記の例に示すように、google.charts.setOnLoadCallback を呼び出してこの関数を指定することもできます。詳しくは、コールバックをご覧ください。

  google.charts.load('current', { packages: [ 'corechart'], callback: drawChart });

mapsApiKey

（v45）この設定では、Geochart とマップグラフで使用するキーを指定できます。この場合、ユーザーに対するサービスのスロットリングがときどき発生する可能性のある、デフォルトの動作を使用せずに、この方法を使用することをおすすめします。「Google Maps JavaScript API」サービスを使用するために独自のキーを設定する方法については、キー/認証の取得をご覧ください。コードは次のようになります。

  var myMapsApiKey = 'SomeMagicToSetThis';
  google.charts.load('45', { packages: [ 'geochart'], mapsApiKey: myMapsApiKey  });

safeMode

（v47） true に設定すると、ユーザー提供データから HTML を生成するすべてのグラフとツールチップで、安全でない要素と属性が削除されてサニタイズされます。別の方法（v49 以降）では、同じ読み込み設定を受け入れながら常に「現在の」バージョンを読み込むショートカットを使用して、ライブラリをセーフモードで読み込むこともできます。

  google.charts.safeLoad({ packages: ['corechart'] });

言語 / 地域

言語 / 地域は、国や言語のテキストをカスタマイズする場合に使用します。言語 / 地域は、通貨、日付、数値などの値の書式設定に影響します。

デフォルトでは、Google Charts は「en」ロケールで読み込まれます。このデフォルトをオーバーライドするには、読み込み設定で言語 / 地域を明示的に指定します。

特定の言語 / 地域向けにフォーマットされたグラフを読み込むには、次のように language 設定を使用します。

  // Load Google Charts for the Japanese locale.
  google.charts.load('current', {'packages':['corechart'], 'language': 'ja'});

実際の例については、こちらのリンクをご覧ください。

コールバック

google.charts.load によって読み込まれたパッケージのいずれかを使用するには、読み込みが完了するまで待つ必要があります。ドキュメントの読み込みが終わるまで待つだけでは不十分です。この読み込みが完了するまでに時間がかかることがあるため、コールバック関数を登録する必要があります。これには次の 3 つの方法があります。google.charts.load 呼び出しで callback 設定を指定するか、setOnLoadCallback を呼び出して関数を引数として渡すか、google.charts.load の呼び出しによって返される Promise を使用します。

これらのいずれの方法でも、関数を呼び出すのではなく関数の定義を指定する必要があります。指定する関数の定義は、名前付き関数（名前を指定するだけです）か、匿名関数のいずれかです。パッケージの読み込みが完了すると、このコールバック関数は引数なしで呼び出されます。また、ローダーはドキュメントの読み込みが完了するのを待ってから、コールバックを呼び出します。

複数のグラフを描画する場合は、setOnLoadCallback を使用して複数のコールバック関数を登録するか、それらを 1 つの関数に結合します。詳しくは、 1 ページに複数のグラフを描画する方法をご覧ください。

  google.charts.setOnLoadCallback(drawChart1);
  google.charts.setOnLoadCallback(drawChart2);
  // OR
  google.charts.setOnLoadCallback(
    function() { // Anonymous function that calls drawChart1 and drawChart2
         drawChart1();
         drawChart2();
      });

Promise によるコールバック

コールバックを登録するもう 1 つの方法は、google.charts.load 呼び出しから返される Promise を使用することです。そのためには、次のようなコードを使用して then() メソッドの呼び出しを追加します。

  google.charts.load('upcoming', {packages: ['corechart']}).then(drawChart);

Promise を使用するメリットの 1 つは、より多くの .then(anotherFunction) 呼び出しを連結するだけで、簡単により多くのグラフを描画できることです。また、Promise を使用すると、コールバックに必要な特定のパッケージにコールバックが関連付けられます。これは、google.charts.load() をもう一度呼び出してさらにパッケージを読み込む場合に重要です。

ライブラリローダのコードを更新する

以前のバージョンの Google グラフでは、ライブラリの読み込みに異なるコードが使用されていました。次の表に、古いライブラリローダのコードと新しいコードを示します。

古いライブラリローダのコード
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); </script>
新しいライブラリローダのコード
<script src="https://www.gstatic.com/charts/loader.js"></script> <script> google.charts.load('current', {packages: ['corechart']}); google.charts.setOnLoadCallback(drawChart); </script>

古いライブラリローダのコード

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
</script>

新しいライブラリローダのコード

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
  google.charts.load('current', {packages: ['corechart']});
  google.charts.setOnLoadCallback(drawChart);
</script>

既存のグラフを更新するには、古いライブラリローダのコードを新しいコードに置き換えます。ただし、上記のライブラリの読み込みには制限があります。

次へ: データの準備