Google Chartsで作る図表&インフォグラフィックス!

ジオチャート(日本版)の描画

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
GoogleChartsと準備したデータを利用して、実際にジオチャート(データを含んだ日本地図)を描画する方法について解説致します。
講師:
03:08

字幕

このレッスンでは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を使って 時系列グラフ タイムラインを描画する 方法について解説いたしますので そちらも併せてご覧ください

Google Chartsで作る図表&インフォグラフィックス!

インフォグラフィックスとはさまざまなデータを人々が直感的に理解できるように図表化・グラフ化したものです。このコースでは、Google ChartsとJavaScriptを使ったインフォグラフィックスの作り方について解説します。このツールの基本的な使い方やさまざまな種類のチャートの作り方、またジオチャートやタイムライン機能などについても説明します。

1時間32分 (27 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2015年04月02日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。