散布図の描画 - JavaScriptのチュートリアル

このレッスンではGoogle Chartsと 準備したデータを利用して 実際に散布図を描画する方法について 解説いたします まずはダウンロードしてきたこちらの 「scatter_chart」という フォルダの中に入っている この「index.htmlファイル」を エディタで開いてください そしてこれがそのファイルを開いた状態です このファイルを使って今回のレッスンの解説を 進めていきたいと思います それではさっそくレッスンを始めていきましょう まずは前回までのレッスンのおさらいです 前回までのレッスンで まずは散布図を作るための「data」とそして 「option設定」を行ってきました 今回はこの「data」と「option設定」を利用して 実際に散布図を描画してみたいと思います 今回注目していただきたい部分は こちらの部分となります それでは順番に見ていきましょう まず「変数chart」を作成しています そしてそのあとに 「new google.visualization」 「ScatterChart ( );」と書いています この「ScatterChart」のあとの 「( )」の中ですが これはその散布図を描画したい HTML要素を指定しています 要するに「chart」という名前の 「id」が付いた要素ということですね そしてこちらの 「ScatterChart」の部分では 散布図を描画するために このように「ScatterChart」と書いています この部分は描画したい図表に基づいて 内容を変更していく形でしたね 例えば円グラフなら「πChart」 横棒グラフなら「barChart」 といった形でしたね そしてここまで記述したら この「変数chart」には 散布図を描画するための 準備が整いました 次はこの「変数chart」を使って 実際に散布図を描画してみます まずはこの「変数chart」と書いて「.」 そして図表を描画するため 「draw」と書きます そして「( );」、そしてこちらの第一引数には 上で定義したこちらのdataをセットします そしてこちらの第二引数の「options」は こちらも上で定義した この「option設定」ですね この変数をセットします このようにすることで 準備した「data」と「option設定」の内容をベースに…