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

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

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

<縦>棒グラフの為のデータの準備と設定

<縦>棒グラフの為のデータの準備と設定 - JavaScriptのチュートリアル

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

<縦>棒グラフの為のデータの準備と設定

このレッスンでは Google Chartsを使って 縦に伸びる棒グラフを描画するための 実際のデータの準備と 設定方法について解説いたします まずはダウンロードしてきた こちらの「prepare_data_for_column」 というフォルダの中に入っている この「index.html」を エディタで開いてください そしてこれがそのファイルを開いた状態です このファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう それでは縦に伸びる棒グラフ を生成するためのデータ を作成していきたいと思います 今回はこちらの部分 にご注目ください 今回は衆議院議員選挙における投票率の推移を 男女別でグラフにしてみたいと思います データの作り方はこれまでの円グラフや 横に伸びる棒グラフ と同じです では順番に見ていきます まずは変数「data」を作ってあげて 「data」を書くのせるための箱 もっと厳密にいえば データを格納するためのテーブルを 作成してあげます そしてその中に三つのデータを 入れれる枠を用意してあげます それがこちらの部分ですね まず一つ目は この縦に伸びる棒グラフの 横軸の基準となる 選挙年月 のデータとなります そしてその選挙年月のデータの種別は 「string」ということで文字列を設定します そしてこちらの二つのデータについては 実際のデータが格納される枠ですね 一つ目は「男」ということで 数値を設定できるようにしています そしてもうひとつは「女」という形で こちらも同様に数値を 設定できるようにしています そしてこの作成した枠の中に 実際のデータを入れている部分が こちらの部分となります このように定義した順番に 左からまず選挙年月の文字列 ここでは「平成5年7月」 と記入しています そして二つのデータはこちらの「男」ですね 「66.4」ということで 数値を設定しています そして次にこの「68.1」というデータですが これは三つ目に定義したこの「女」 に当てはまる値となります このように上で定義した 順番どおりに左から それに応じたデータを格納していきます そして同じように配列で どんどんとほかのデータも入力していきます そしてデータの入力がすべて完了したら 最後にこちらのオプション設定で…

目次