Google Visualization API – Using Visualization : Overview の和訳 その2
2008年10月24日（金）09:00｜木村
注意！！ 原文ページに変更があったため、この記事の訳は既に古くなっています。 原文ページをご覧下さい。
こんにちは、木村です。
今回はGoogle Visualization API – Using Visualization : Overview の和訳 その1の続きです。
前回も書きましたが、意訳ですので、原文の単語と全く違う言葉に置きかえている場合も多々あります。更に、今回はコードや図も多く登場しますので、是非、原文ページと併せて、ご覧下さい。気になる箇所や間違っている箇所があれば、どうかご指摘下さい。
では、以下訳です。
Visalizationsを用いてのHello World
APIについて学び始める一番簡単な方法は、単純な例を介することです。次の例は円グラフを表示します。[コード1]上記のコードの実行結果は次のグラフになります。このグラフはインタラクティブにできています。円グラフか凡例をクリックしてみてください。[図1]あなたのページでVisualization APIを使う
あなたのページでVisualization APIを使うには、Google AJAX APIsスクリプトタグをインクルードして、Google.load(“visualization”, “1″)を呼び出す必要があります。 packagesプロパティを使って、使いたいvisalizationsの名前を指定してください。[コード2]最初のスクリプトタグは個々のGoogle APIsを呼び出すためのgoogle.load関数をロードしています。それから、google.load(“visualization”, “1″, {packages: ["piechart"]) はバージョン1のVisalization APIと円グラフパッケージをロードしています。現在のVisualization APIはバージョン1です。新しいバージョンがいずれ利用可能になるかもしれません。 1つ以上のvisualizationパッケージをロードするには、必要なvisualizationsをリストにして引数に渡してください。[コード3]それぞれのvisualizationの名前を見つけるには、Visualization Galleryで、使いたいvisualizationのドキュメントでloadの使用説明を読んでください。DataTbleの作成
APIがロードされれば、あなたが視覚化したいデータを作成できます。全てのvisualizationsのデータはDataTableクラスを使って作成します。DataTableは行と列とセルを持った2次元のテーブルです。それぞれの列はデータ型が定義されています。[コード4]Visualizationの追加
visualizationをページに追加するには、加えたいvisualizationのオブジェクトを作成します。visualizationのコンストラクタは、visualizationを描画する位置を指定したDOM要素がパラメータとして必要です。オブジェクトが作成されたら、指定された要素にvisualizationを描画するdrawメソッドを呼び出してください。drawメソッドは2つのパラメータが必要です。:データテーブルとオプションパラメータ。オプションは 名前：値で表現します。サポートしている名前と値はそれぞれのvisualizationのドキュメントで定義されています。[コード5]drawメソッドは、データまたはオプションを変えた時に、何度でも呼び出すことができます。使用可能なVisualizations
Googleが開発した、またはGoogleに送られたAPIの規約に則って作られた、全ての使用可能なvisualizationsはVisualization Galleryに一覧があります。それぞれのvisualizationにはvisualizationのリファレンスマニュアルと例、データポリシーが書かれているドキュメントページへのリンクがあります。 Visualization APIにはGadget Visualizationsのギャラリーもあることを注意してください。詳しくはUsing Visualization Gadgetsの章を読んでください。トラブルシューティング
もし、あなたのコードが動いていないように見える場合、その問題を解決する手助けになるかもしれない、いくつかのアプローチがあります。
- タイプミスを探してください。JavaScriptは大文字と小文字を区別する言語だということを思い出してください。
- JavaScriptデバッガを使ってください。Firefoxでは、Venkman DebuggerやFirebug add-onなどのJavaScriptコンソールを使用できます。IEでは、Microsoft Script Debuggerを使用できます。
- Google Visualization API disuccution groupで検索をしてください。あなたの疑問の解答が書かれた投稿がなければ、実際に問題のあるWebページへのリンクと一緒に質問を投稿してください。
これで、Using VisualizationのOverviewページは終わりです。面白そうなAPIですよね。
次は、Using VisualizationのEventsページを訳してみたいと思います。 少し間が空くかもしれませんが、訳が出来上がり次第、また掲載したいと思います。
