Load the Libraries
このページでは、Google Chart のライブラリを読み込む方法を説明します。
Basic Library Loading
Web ページの <head> には、ほとんど例外なく Google Charts が含まれます：
<script src="https://www.gstatic.com/charts/loader.js"></script><script> google.charts.load('current', {packages: }); google.charts.setOnLoadCallback(drawChart); ...</script>
この例の最初の行はローダー自体を読み込みます。 ローダーのロードは、描画するチャートの数にかかわらず、一度だけ行うことができます。 ローダーをロードした後、google.charts.load関数を1回以上呼び出すと、特定のチャート・タイプのパッケージをロードすることができます。
google.charts.loadの最初の引数はバージョン名または番号で、文字列として指定されます。 'current' を指定すると、Google Charts の最新の公式リリースがロードされます。 もし、次のリリースの候補を試したい場合は、代わりに'upcoming'を使用してください。 一般に、この2つの違いはほとんどなく、新しいリリースが進行中である場合を除き、完全に同一となります。 upcoming を使用する一般的な理由は、Google が来月か再来月にリリースしようとしている新しいチャートタイプや 機能をテストしたい場合です。 (フォーラムで今後のリリースをお知らせしますので、発表されたら試してみて、チャートへの変更が受け入れられるかどうかを確認することをお勧めします。)
上の例では、corechart(bar, column, line, area, step area, bubble, pie, donut, combo, candlestick, histogram, scatter) を表示したいものと仮定しています。 別の、あるいは追加のチャートタイプを表示したい場合は、上記のcorechartに適切なパッケージ名を代入または追加します（例: {packages: }. パッケージ名は、各チャートのドキュメント ページの「読み込み」セクションで確認できます。
この例では、Web ページのどこかで drawChart という名前の JavaScript 関数が定義されていることも想定しています。 その関数に好きな名前を付けることができますが、グローバルに一意であることと、google.charts.setOnLoadCallback の呼び出しでそれを参照する前に定義されていることを確認してください。
注意: Google Charts の以前のバージョンでは、ライブラリを読み込むために上記とは異なるコードを使用していました。 既存のチャートを新しいコードに更新するには、ライブラリ ローダー コードを更新するを参照してください。 このタグは、ドキュメントの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 Charts のロード方法について、いくつかの小さいが重要な制限事項があります：
-
google.charts.loadは一度しか呼び出すことができません。 - ChartWrapperを使用している場合、ChartWrapperによる自動ロードに依存するのではなく、必要となるすべてのパッケージを明示的にロードする必要があります。
- ジオチャートとマップ チャートでは、古いライブラリー ローダーと新しいライブラリー ローダーの両方をロードする必要があります。 繰り返しますが、これはv45以前のバージョンのみであり、それ以降のバージョンではこの作業を行うべきではありません。
<script src="https://www.gstatic.com/charts/loader.js"></script><script src="https://www.google.com/jsapi"></script>
Load Version Name or Number
google.charts.load呼び出しの最初の引数は、バージョン名または番号です。 現時点では2つの特別なバージョン名と、いくつかの凍結バージョンがあるだけである。
current これは最新の公式リリース用で、私たちが新しいリリースをプッシュするたびに変化します。 このバージョンは理想的にはよくテストされ、バグもありませんが、動作に満足したら、代わりに特定の凍結バージョンを指定することもできます。 upcoming これは次のリリース用で、まだテスト中であり、公式の現在のリリースになる前のものです。 このバージョンを定期的にテストし、このバージョンが公式リリースになる前に対処すべき問題があるかどうかをできるだけ早く知るようにしてください。
Google Charts の新バージョンをリリースする際、まったく新しいチャート タイプのような大きな変更もあります。
Google Chart の作成者の多くは、自分の望むものになるまでチャートのルック アンド フィールを微調整しています。 作成者の中には、私たちが将来どのような改良を加えようとも、自分のチャートが変わることがないことに安心感を覚える人もいるかもしれません。 5764>
Frozen chart versions are identified by number, and they redescribed in ourOfficial Releases.To load a frozen version, replace current or upcoming in your call of google.charts.load with the frozen versionnumber:
<script src="https://www.gstatic.com/charts/loader.js"></script><script> google.charts.load('43', {packages: }); google.charts.setOnLoadCallback(drawChart); ...</script>
We expect that frozen versions will remain available indefinitely, but we may retire frozen versions that had security concerns.For the frozen versions, we have been upgraded.
Load Settings
google.charts.loadの呼び出しの2番目のパラメーターは、設定を指定するためのオブジェクトです。 設定には、以下のプロパティがサポートされています。
packages 0個以上のパッケージの配列。 ロードされる各パッケージには、一連の機能（通常はチャートの種類）をサポートするために必要なコードが含まれます。 ロードする必要があるパッケージは、各チャートのドキュメントに記載されています。 ChartWrapperを使って、必要なパッケージを自動的に読み込むようにすれば、パッケージを指定する必要はありません。 language チャートの一部であるテキストをカスタマイズするための言語またはロケールのコードです。 詳しくは、ロケールをご覧ください。 コールバック パッケージがロードされたときに呼び出される関数です。 または、上の例で示したように、google.charts.setOnLoadCallbackを呼び出してこの関数を指定することもできます。 詳細は、「コールバック」を参照してください。
google.charts.load('current', { packages: , callback: drawChart });
mapsApiKey (v45) この設定では、ジオチャートおよびマップチャートで使用するキーを指定できます。 デフォルトの動作では、ユーザーのサービスが制限されることがありますが、この設定を使用するとよいでしょう。 Google Maps JavaScript API’ サービスを使用するための独自のキーを設定する方法については、こちらを参照してください。 キーを取得する/認証する
var myMapsApiKey = 'SomeMagicToSetThis'; google.charts.load('45', { packages: , mapsApiKey: myMapsApiKey });
safeMode (v47) trueに設定すると、ユーザーが提供したデータからHTMLを生成するすべてのチャートとツールチップは、安全でない要素や属性を取り除いてサニタイズされます。 代わりに (v49+) は、同じ読み込み設定を受け入れるショートカットを使用して、ライブラリをセーフ モードで読み込むことができますが、常に「現在の」バージョンを読み込みます:
google.charts.safeLoad({ packages: });
Locales
Locales は国または言語用にテキストをカスタマイズするために使用し、通貨、日付、数字などの値の書式設定に影響します。
特定のロケール用にフォーマットされたチャートを読み込むには、次のように language 設定を使用します:
// Load Google Charts for the Japanese locale. google.charts.load('current', {'packages':, 'language': 'ja'});
このリンクから実際の例をご覧ください。
Callback
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によるコールバック
コールバックを登録する別の方法は、google.charts.loadコールから返されるPromiseを使用することです。 これを行うには、次のようなコードで then() メソッドに呼び出しを追加します。
google.charts.load('upcoming', {packages: }).then(drawChart);
Promise を使用する利点の 1 つは、より多くの .then(anotherFunction) 呼び出しを連結するだけで簡単に多くのグラフを描画できることです。 また、Promise を使用すると、コールバックに必要な特定のパッケージとコールバックが結び付けられます。これは、google.charts.load() の別の呼び出しでさらにパッケージをロードしたい場合に重要です。
Update Library Loader Code
Google Charts の以前のバージョンでは、ライブラリのロードに異なるコードを使用していました。 下の表は、古いライブラリ ローダー コードと新しいライブラリ ローダー コードを示しています。
<script type="text/javascript" src="https://www.google.com/jsapi"></script><script type="text/javascript"> google.load("visualization", "1", {packages:}); google.setOnLoadCallback(drawChart);</script>
<script src="https://www.gstatic.com/charts/loader.js"></script><script> google.charts.load('current', {packages: }); google.charts.setOnLoadCallback(drawChart);</script>
既存のチャートを更新するには、古いライブラリ ローダー コードと新しいコードに置き換えられますが、上記のライブラリ読み込みの制限に注意をしてください。
Leave a Reply