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

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

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

軸要素の内容の表記

軸要素の内容の表記

このレッスンでは Google Chartsで描画したグラフの縦軸 横軸に要素の内容を 表記する方法について解説致します まずはダウンロードしてきたこちらの「axis」 というフォルダの中に入っている この「index.html」ファイルを エディタで開いてください そしてこれがそのファイルを エディタで開いた状態です このファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう まずは前回までのレッスンで作成した 縦に伸びる棒グラフ を再度ブラウザで確認してみたいと思います そしてこれが前回までのレッスンで作成した 縦に伸びる棒グラフですね 今回はこちらの縦軸の部分と 横軸の部分に それらの項目を表す内容を表記してみたいを思います 要するに縦軸と横軸のそれぞれの 項目のタイトルですね それでは「エディタ」に戻ります そして今回注目いただきたいのは こちらの部分となります この部分は描画している「chart」 要するに図表のオプション設定を 行っている場所でしたね 今回は前回までのレッスンで行ったオプション設定に こちらの部分を追加しています それでは順番に見ていきます まずはこちらの部分から まずオプション項目を「vAxis」としています これは縦軸のことを指します そしてその縦軸にタイトルを 設定しています このタイトルには 「投票率(単位:%)」といった 文字列を表記しています そしてさらにこちら 「titleTextStyle」という 項目を追加しています この項目ではその追加した タイトルに対して その文字スタイルを 設定することができる項目です 今回はこちらの中に 「italic: false」としています こうすることで表示するタイトルが 「Italic」体にならないようにしています ちなみに 何も指定していないと デフォルトは「Italic」体で 表示される形となっております 続いて同様にこちらの部分も見ていきます こちらの項目では「hAxis」 としていますね これは横軸のことを表します 同じようにその横軸のタイトルには 選挙年月という文字列を設定して 「titleTextStyle」には 上と同じ形で「italic: false」 としています それではこの状態で…

目次