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

タイムラインの為のデータの準備と設定

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

ぜひご覧ください。

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

字幕

このレッスンでは Google Chartsを使ってタイムライン いわゆる時系列グラフを描画するための 実際のdataの準備と 設定方法について解説いたします まずはダウンロードしてきたこちらの 「prepare_data_for_timeline」 というフォルダの中に入っている この「index.htmlファイル」を エディタで開いてください そしてこれがそのファイルを開いた状態です このファイルを使って今回のレッスンの解説を 進めていきたいと思います それではさっそくレッスンを始めていきましょう 今回注目していただきたいのは こちらのファイルの中の この部分となります こちらの上の部分で データの設定を行っていて そしてこちらの下の部分で オプションの設定をしています 今回はタイムラインの 図表を表示するにあたり 主な戦国大名の生きた期間を表す 図表の表示していってみたいと思います それではまずこちらの データの準備のほうからからみていきます まずこちらの部分で 変数「data」を作成して そしてその中に 実際のデータを格納するための データテーブルを設定しています そして この次のこの3行の部分で このデータテーブルに対して 3つの「Column」を作成しています 1つめは「name」という「id」をつけた data型が「string」 要するに 文字列の「Column」です この「Column」には戦国大名の名前を 格納するための「Column」とします そして2つ目のこちら こちらには「birth」といった「id」をつけて そしてdata型を「date」 要するに日付のデータを入れ込むような 「Column」にしています そして3つめも同様 こちらは「id」を「death」という値にして そしてdata型を同じく 「date」にしています こちらの「birth」には その大名の生誕日を設定して そしてこちらの「death」には その大名の死没日を 設定していきたいと思います そしてこの後に続く こちらの部分で 実際のデータを作成していきます これまで通り一つ一つのデータは 配列で作成していきます そして配列の左側から順番に この上で定義した こちらの「Column」の順番に沿うような形で データを格納していきます わかりやすく こちらの 「織田信長」のデータでみていきましょう まず「id:'name'」の「Column」には 「織田信長」という大名の名前を 文字列で格納します そしてその次ですね こちら「id:'birth'」 いわゆる「生誕日」ですが こちらのように 「JavaScript」の 「date object」を使って格納していきます 「new Date」と書いて「( )」 そしてその中に「年,月,日」を 順番に入れていきます ここで注意していただきたいのが こちらの「月」にあたる部分です この「月」にあたる部分は 実際の月よりも「-1」した値を 入れるようにしてください 要するに本来は「1月」の場合であれば ここは「0」といった形になります そして 3つめの こちらのデータも同じですね 「Date」オブジェクトを利用して 「年,月,日」を指定します このようにして 1つのデータを作成したら 他のデータに関しても 同様の形で作成していきます ここまでで データの準備が完了しました そして次はこちらの「オプション設定」ですが 今回はこちらの「title」の部分に 「主な戦国大名」という風にセットしています これでタイムラインを表示させるための データの準備とオプション設定の準備が 完了しました 以上でレッスンは終了です 今回はGoogle Chartsを使って タイムライン 時系列グラフを描画するための 実際のデータの準備と 設定方法について解説いたしました 以降のレッスンでは Google Chartsと 準備したデータを利用して 実際にタイムライン 時系列グラフを 描画する方法について解説いたしますので そちらも併せてご覧ください

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

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

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

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

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

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