Google Chartsで作る図表&インフォグラフィックス!

軸要素の内容の表記

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
GoogleChartsで描画したグラフの縦軸・横軸に、要素の内容を表記する方法について解説致します。
講師:
03:35

字幕

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

Google Chartsで作る図表&インフォグラフィックス!

インフォグラフィックスとはさまざまなデータを人々が直感的に理解できるように図表化・グラフ化したものです。このコースでは、Google ChartsとJavaScriptを使ったインフォグラフィックスの作り方について解説します。このツールの基本的な使い方やさまざまな種類のチャートの作り方、またジオチャートやタイムライン機能などについても説明します。

1時間32分 (27 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2015年04月02日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。