コース: JavaScript 実践講座:Google Chartsで図表を作ろう

今すぐコースを受講しましょう

今すぐ登録して、23,100件以上登録されている、業界エキスパート指導のコースを受講しましょう。

線グラフの為のデータの準備と設定

線グラフの為のデータの準備と設定

このレッスンでは Google Chartsを使って 線グラフを描画するための 実際のデータの準備と 設定方法について解説致します まずはダウンロードしてきた こちらの「prepare_data_for_line」 というフォルダの中に入っている この「index.html」ファイルを エディタで開いてください そしてこれがそのファイル を開いた状態です このファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう 今回注目して頂きたい部分は こちらのファイルの中の この部分となります 今回は日本 アメリカ イギリス の三ヶ国で出生率の推移を 線グラフで描画していって みたいと思います まずはそのためのデータの準備ですね では順番に見ていきたいと思います まずはこちらの部分で 変数「data」を作成して そしてその中に データを入れ込むための箱 厳密に言うと データを入れ込むための テーブルを作成します そして次にこちらの4行の部分 こちらの部分で実際にデータを 入れるための枠を作っていきます つまりは実際のデータを入れ込むための テーブルに対するカラムを 作成していくわけです まず一行目のこちらの部分 こちらの部分は 線グラフの横軸の基準 となる内容を入れ込んでいきます まずこちらの第二引数でそのタイトルを そして 第一引数の所で「string」 と設定して 文字列のデータを 入れ込めるようにしておきます そしてこちら残りの三つの行に関しては 実際にグラフを描画するためのデータですね まず一つ目は 日本 というタイトルを設定して そしてそのデータ型を 「number」要するに数値と設定しています そして残りの二行に関しても同様ですね 一つは「アメリカ合衆国」 というタイトルを設定して 同じく「number」 数値のデータを入れ込めるようにしています 同じく「number」 数値のデータを入れ込めるようにしています そしてもう一つは「イギリス」 というタイトルを設定して それも同じように 「number」を第一引数に設定して 数値のデータを入れ込めるようにしています そして次に続くこちらの部分 こちらの部分で実際のデータを格納しています まずこちらのデータは この「期間」に該当するデータですね…

目次