ジオチャート（日本版）の描画 - JavaScriptのチュートリアル

このレッスンではGoogle Chartsと 準備したdataを利用して 実際に「GeoChart」 dataを含んだ日本地図を描画する方法ついて 解説いたします まずはダウンロードしてきたこちらの 「Japan_geo_chart」という フォルダの中に入っている この「index.htmlファイル」を 「エディタ」で開いてください そしてこれがそのファイルを開いた状態です このファイルを使って今回のレッスンの解説を 進めていきたいと思います それではさっそくレッスンを始めていきましょう 今回注目していただきたい部分は こちらのファイルの中の この部分となります それでは順番にみていきましょう まずは変数chartを定義して そしてその中に 「new google.visualization. GeoChart( );」と書きます そしてこの「GeoChart」の後の 「( )」の間には この「GeoChart」を表示させたい HTMLの要素を指定します 要するに今回は idChartが付いた要素ということですね そしてこちらの部分には 「GeoChart」を表示させたいので 「GeoChart」と書いています 世界地図であっても日本地図であっても この部分は「GeoChart」 となりますので注意してください そしてここまで完了すれば この「変数Chart」を利用して 実際に「GeoChart」を描画していきます 「変数Chart」と書いて「.draw( );」 そして第一引数には 上で設定したこちらのdata そして第二引数には こちらの「option設定」で設定した この「変数options」を設定します 以上で「GeoChart」の 描画処理は完了です ただ最後に このファイルの上のほうまで戻っていただいて こちらの「packages」の内容がきちんと 「geochart」になっているかどうかを確認しておいてください 「GeoChart」を描画するためには ここの部分が 「geochart」になっている必要があります それではこの状態で この「index.htmlファイル」を ブラウザで開いて どのように表示されてくるか 確認してみたいと思います ブラウザで開くと このように表示されてきましたね このように前回のレッスンで optionに設定した通り 都道府県ごとにdataを持った 日本地図を表示することができました 色が濃い都道府県は 人口増減率が高いエリアとなっていて 逆に色が薄い都道府県は 人口増減率が低い部分となっています このように表示されてこれば きちんとプログラムの実装が完了できている ということになります 以上でレッスンは終了です 今回はGoogle Chartsと 準備したdataを利用して 実際に「GeoChart」にdataを含んだ 日本地図を描画する方法ついて 解説いたしました 以降のレッスンからは Google Chartsを使って 時系列グラフ　タイムラインを描画する 方法について解説いたしますので そちらも併せてご覧ください