＜横＞棒グラフの描画 - JavaScriptのチュートリアル

このレッスンでは Google Chartsと準備したデータを利用して 実際に横の棒グラフを描画する方法について 解説いたします まずはダウンロードしてきた こちらの「bar_chart」という フォルダーの中に入っている こちらの「index.html」ファイルを エディタで開いてください そして　これが そのファイルを開いた状態です このファイルを使って 今回のレッスンの解説を 進めていきたいと思います それでは　早速 レッスンを始めていきましょう さて　まずは 前回までのレッスンのおさらいです 前回は　こちらの部分で 横棒グラフに表示させるための データを作成して そして こちらで「title」を記述しましたね 今回は これらのデータやオプション設定をベースに 実際に　横に伸びる棒グラフを 実装していきたいと思います 今回　注目して頂きたいのが こちらの部分ですね それでは実際に どのように実装しているか 確認していきたいと思います 基本的には　以前のレッスンで作成した 円グラフの実装の仕方とほぼ同じです 順番に見ていきましょう まずは　変数 「chart」を作っていますね そして　その後に 「new google.visualization.BarChart」 と書いて 「();」 そして　この「()」の中には その図表を表示させたい HTMLの要素を指定してあげます 以前の円グラフと異なる部分は こちらの部分となります 以前の円グラフの時は こちらは「PieChart」と書きましたが 今回は 横に伸びる棒グラフを意味する 「BarChart」と記述します そして　ここまでできたら 実際に その横棒グラフを描画します その描画する処理が こちらの部分ですね 「chart」と書いて 「.draw」と書いて　「()」 そして　「;」 そして　この「()」の中の引数の 1つ目は　上で作成したこちらの 描画したいデータ そして　2つ目の引数 こちらには この部分のオプションですね このように指定してあげることで 上記の内容を反映させた 横に伸びる棒グラフを 描画することができます それでは こちらの「index.html」を ブラウザで開いてみましょう これが　「index.html」ファイルを ブラウザで開いた状態です このように　横に伸びる棒グラフが 出来上がっていますね こちらのグラフの縦軸には 年齢を表す 「6歳」「7歳」「8歳」といった 文字列が表示されていますね そして　こちらの青いバーは 男子の平均身長を表していて そして　こちらの赤いバーは 女子の平均身長を表しています このように表示されてくれば きちんと プログラムの実装が完了できている といった形になります 以上で　レッスンは終了です 今回は Google Chartsと準備したデータを利用して 実際に横に伸びる棒グラフを 描画する方法について解説いたしました 以降のレッスンでは このGoogle Chartsで描画した グラフのスタイルを設定する方法について 解説いたしますので そちらもあわせてご覧ください