カーブタイプの設定 - JavaScriptのチュートリアル

このレッスンでは Google Chartsで描画した 線グラフのカーブタイプ を設定する方法について解説致します まずはダウンロードしてきた こちらの「curve_type」 というフォルダの中に入っている この「index.html」 ファイルを「エディタ」で開いてください そしてこれが そのファイルを開いた状態です このファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう それではまず前回までのレッスンで 作成した線グラフを 再度ブラウザの方で 確認してみたいと思います これが前回までのレッスンで 作成した線グラフですね 注目して頂きたい部分はこちらの それぞれの線のこの角度ですね 今はこのように　くっきりと折り曲がるような 形の線グラフが出来上がっています 今回はこれを曲線で 表示させてみたいと思います それではエディタに戻ります この線グラフを曲線で描画したい その場合にはこちらのオプション設定の中 でこのように指定していきます まず項目名を「curveType」 として　その値を「function」 という形にしています このように「curveType」を 「function」にすると 先ほど直線で描かれていた線グラフが 曲線で描かれるようになります ちなみに　この「curveType」 を「function」ではなく「none」と設定したり もしくはそもそも設定しない という形をとると 先ほどのように線グラフが 直線で描かれる形となります それではこの「curveType」を 「function」に設定した状態で 再度この「index.html」ファイルを ブラウザで確認して見たいと思います このように表示されてきましたね このように先ほどは直線で 描かれていた線グラフが このように滑らかなカーブを 描いて描画されるようになります このようにオプション設定では 描画する図表の2倍も 調節することが可能ですので 覚えておくとよいでしょう 以上でレッスンは終了です 今回はGoogle Chartsで描画した 線グラフのカーブタイプを 設定する方法について解説致しました 以降のレッスンからは Google Chartsを使って 散布図を描画する方法について 解説致しますので そちらもあわせて ご覧ください