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

タイムラインの描画

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
GoogleChartsと準備したデータを利用して、実際にタイムライン(時系列グラフ)を描画する方法について解説致します。
講師:
03:23

字幕

このレッスンでは Google Chartsと 準備したデータを利用して 実際にタイムライン 要するに時系列グラフを 描画する方法について 解説いたします まずはダウンロードしてきたこちらの 「timeline」というフォルダの中に入っている 「index.htmlファイル」を 「エディタ」で開いてください そしてこれがそのファイルを開いた状態です このファイルを使って今回のレッスンの解説を 進めていきたいと思います それではさっそくレッスンを始めていきましょう 今回注目していただきたい部分は こちらのファイルの中の この部分となります それでは順番にみていきましょう まずは 変数「chart」を作成してその中に 「new google. visualization.TimeLine」 そして「( );」と書きます そしてこの「TimeLine」の後の 「( )」の中には このタイムラインを描画したい HTML要素を指定します 今回は「chart」といった 「id」が付いた要素となります そしてこちらの部分には 描画したい図表に応じた 記述を行っていきます 今回はタイムラインを表示したいので このように「TimeLine」と 書いていますね 例えばこれが 円グラフであれば「πChart」 そして例えば地図であれば 「GeoChart」 とこれまでのレッスンで書いてきましたね 今回は「TimeLine」 としておきます そしてここまで出来れば タイムラインの 描画の準備が完了しました あとはこちらの 「変数Chart」を利用して 実際に描画していきます それがこちらの部分ですね まずは変数「chart」と書いて 「draw」そして「( );」と書きます そしてこの「draw」の第一引数には 上で定義したこちらのデータですね そしてこの第二引数の「options」は こちらのオプション設定の値ですね これで実際にタイムラインが 描画されてくる形になります ただ1点忘れてはいけないのは こちらのファイルの上の部分にある この「packages」の 中身の部分となります 今回はタイムラインを 表示させたいので この「packages」の内容も 「timeline」としています この部分はGeoChartやタイムラインのように 特殊な図表を表示させたい場合に それに応じて書き換える必要があります これは忘れずに 覚えておきましょう それではこの状態で この「index.htmlファイル」を ブラウザで開いて 内容を確認してみたいと思います ブラウザで開くと このように表示されてきましたね このように この縦軸には 「主な戦国大名」の名前が書いていて そしてその隣には その大名が生きた期間が タイムライン形式で表示されています そしてその横軸にふられているのが これが「年代」ですね このようにタイムラインを使って データを表示させてみると 普段気付かないようなことも 気付かせてくれる場合があるので 見ていて とても楽しいですね 以上でレッスンは終了です 今回はGoogle Chartsと 準備したデータを利用して 実際にタイムライン 要するに時系列グラフを 描画する方法について 解説いたしました

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

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

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

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

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

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