コース: JavaScript 実践講座:Google Chartsで図表を作ろう

今すぐコースを受講しましょう

今すぐ登録して、23,100件以上登録されている、業界エキスパート指導のコースを受講しましょう。

ジオチャート(世界版)の描画

ジオチャート(世界版)の描画

このレッスンではGoogle Chartsと 準備したdataを利用して 実際に「GeoChart」要するにデータを含んだ 世界地図を描画する方法について 解説いたします まずはダウンロードしてきたこちらの 「world_geo_chart」 というフォルダの中に入っている この「index.htmlファイル」を エディタで開いてください そしてこれが そのファイルを開いた状態です このファイルを使って今回のレッスンの解説を 進めていきたいと思います それではまず前回までのレッスンのおさらいです 前回までのレッスンでまずこちらの部分で data tableを作成しました dataの内容は 「国ごとの平均寿命」ということになっています そしてこちらのoption設定の部分で このように図表のタイトルを設定しました 今回はこのdataとoption設定をベースにして 実際に「GeoChart」を 描画してみようと思います 注目していただきたい部分は こちらのファイルの中の この部分となります それでは順番に見ていきましょう まずこちらの部分で「変数Chart」を作成しています そしてこの後に 「new google.visualization GeoChart( );」と書いて この「GeoChart」の後の「( )」中の引数には その「GeoChart」を表示したい HTMLの要素を指定しています 要するにID chartが付いた要素ですね そしてこちらの「GeoChart」と 書いてある部分には 表示したい図表によって 書き方を変えていきます 例えば円グラフだと「πChart」 線グラフだと「LineChart」といった形でしたね 今回は地図を表示したいので 「GeoChart」としています ここまでできれば 後は実際に描画するだけです 先ほど作成したこちらの「chart」を使って 「chart.」そして「draw」と書いて「( );」 そしてこの「draw」の中の第一引数には 先ほど上で定義したこちらのdata table そして2つめの引数 こちらには ここで作成した 「option設定」を格納してあげます これで「GeoChart」の 描画が完了しました ただ1点忘れてはいけないことがあります それはこちらの この部分です この部分はGoogle…

目次