タイムラインの為のデータの準備と設定 - JavaScriptのチュートリアル

このレッスンでは 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」の順番に沿うような形で データを格納していきます わかりやすく　こちらの…