線グラフの描画 - JavaScriptのチュートリアル

このレッスンでは Google Chartsと準備したデータを利用して 実際に線グラフを描画する 方法について解説致します まずはダウンロードしてきた こちらの「line_chart」 というフォルダの中に入っている この「index.html」ファイルを エディタで開いてください そしてこれがそのファイルを 開いた状態です このファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう それではまず前回までの レッスンのおさらいです 前回はこちらの部分で 線グラフに描画するための データを作成しました そしてこちらの部分で その線グラフのタイトル の設定とそしてこちらの「vAxis」で 縦軸の項目のタイトルを 表示するように設定しました また前回のレッスンに補足する形で こちらに「lineWidth」という項目を設定しています この部分はその名のとおり 描画する線グラフの線の太さを 指定することができる項目となっていて 今回は5という形で設定しています それでは実際にこのデータ とこのオプション設定をベースに 線グラフを描画していってみたいと思います 今回注目して頂きたい部分は こちらの部分となります それでは順番に見ていきましょう まずは変数「chart」を作成して その中に 「new google.visualization.LineChart」 「()」 の「;」としています そしてこの「LineChart」の後の括弧の中には その線グラフを描画したい HTMLの要素を指定しています 今回は「getElementById('chart')」 という形になっているので 「id chart」がついたこちらの「div」タグ の中に表示しろ　という形になります そして今回は線グラフを描画したいので こちらの部分には「LineChart」 を指定しています この部分は描画したい図表の内容によって 変えていきます たとえば以前のレッスンで 作成した円グラフでしたら こちらは「piechart」となっていましたね さて　ここまで記述できたら こちらの変数「chart」には 線グラフを描画するための 準備が整いました この変数「chart」を利用して 上で定義したデータとオプション設定 を取り込んで実際に線グラフを…