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

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

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

オプション設定による図表の設定

オプション設定による図表の設定

このレッスンでは Google Chartsのオプション設定機能を使って 図表の設定を行う方法について 解説いたします まずはダウンロードしてきた こちらの「options」という フォルダーの中に入っている この「index.html」ファイルを 「エディタ」で開いてください そして これが そのファイルを開いた状態です このファイルを使って 今回のレッスンの解説を 進めていきたいと思います それでは 早速 レッスンを始めていきましょう 今回 注目して頂きたいのは こちらのファイルの中の この部分となります Google Chartsには オプション設定機能というものがあって その機能を使って 描画するChart 要するに図表のことですね その図表に対して 様々な設定を行うことができます それでは そのオプション機能の使い方を 見ていきたいと思います まずは 変数を定義してあげます 「var」と書いて 変数の名前を 「options」としてあげます そして「={」 そしてこちらの「}」 そして「;」と書いて その「{}」の間に 実際の設定内容を記述していきます 今回は 3つの項目について設定を行っています では 順番に見ていきましょう まず 1つ目はこちらの「title」 この「title」を設定することによって 描画する図表の題名を 設定することができます このように 文字列で設定しておきます このように 「title」を設定しておくことで 描画する図表とあわせて 一緒に画面に表示されていきます 続いては こちらの「width」という項目 この項目は 表示する図表の 横幅のサイズを指定することができます 今回は 「1280」と書いていますね これは 横幅1280pxで表示しろ といった意味になります そして 最後にこちらの「height」 これも同様に 表示する図表の縦幅のサイズを 指定してあげています 今回は 「600」と書いていますね これも同様に 縦幅600pxで描画しろ といった意味になります このGoogle Chartsのオプション機能ですが この他にも 描画する図表の見栄えを調節したり 図表とあわせて表示される 凡例の見栄えを調節したり 他にも 例えば 棒グラフのように 縦軸や横軸があるような図表の場合 その縦軸や横軸に対して…

目次