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

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

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

ぜひご覧ください。

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

字幕

このレッスンでは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 Chartsで 図表を表示させるための 「package」を読み込んでいる場所ですが 今回のように「GeoChart」といった 特殊な図表を表示させたい場合は こちらにそれに応じた「package」を 読み込んであげる必要があります これまでの円グラフや棒グラフ そして線グラフ等といった 基本的な図表であれば ここは「core chart」という内容で よかったのですが 今回は「GeoChart」を表示したい という形になりますので ここを「GeoChart」という形に 変更しておきます それではこの状態で この「index.htmlファイル」を ブラウザで開いて どのように表示されてくるのか 確認してみましょう これがその「GeoChart」を表示した状態です このように自動的に 世界地図が描画されてきます そしてdataに設定してきた内容が このように描画されていますね 今回は国ごとの平均寿命ということで このように日本が一番平均寿命が高い国 というようになっています そしてこの上位10か国の中で 最も平均寿命が短いのが こちらのカナダということで このように色も薄くなっていますね このように「GeoChart」を使えば 地図をベースとした図表を描画することが 可能になります 以上でレッスンは終了です 今回はGoogle Chartsと 準備したdataを利用して 実際に「GeoChart」データを含んだ 世界地図を描画する方法について 解説いたしました 以降のレッスンでは このGoogle Chartsを使って 今度は日本地図の「GeoChart」を 描画する方法を解説していきますので そちらも併せてご覧ください

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

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

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

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

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

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