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

<横>棒グラフの描画

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
GoogleChartsと準備したデータを利用して、実際に<横>棒グラフを描画する方法について解説致します。
講師:
03:34

字幕

このレッスンでは Google Chartsと準備したデータを利用して 実際に横の棒グラフを描画する方法について 解説いたします まずはダウンロードしてきた こちらの「bar_chart」という フォルダーの中に入っている こちらの「index.html」ファイルを エディタで開いてください そして これが そのファイルを開いた状態です このファイルを使って 今回のレッスンの解説を 進めていきたいと思います それでは 早速 レッスンを始めていきましょう さて まずは 前回までのレッスンのおさらいです 前回は こちらの部分で 横棒グラフに表示させるための データを作成して そして こちらで「title」を記述しましたね 今回は これらのデータやオプション設定をベースに 実際に 横に伸びる棒グラフを 実装していきたいと思います 今回 注目して頂きたいのが こちらの部分ですね それでは実際に どのように実装しているか 確認していきたいと思います 基本的には 以前のレッスンで作成した 円グラフの実装の仕方とほぼ同じです 順番に見ていきましょう まずは 変数 「chart」を作っていますね そして その後に 「new google.visualization.BarChart」 と書いて 「();」 そして この「()」の中には その図表を表示させたい HTMLの要素を指定してあげます 以前の円グラフと異なる部分は こちらの部分となります 以前の円グラフの時は こちらは「PieChart」と書きましたが 今回は 横に伸びる棒グラフを意味する 「BarChart」と記述します そして ここまでできたら 実際に その横棒グラフを描画します その描画する処理が こちらの部分ですね 「chart」と書いて 「.draw」と書いて 「()」 そして 「;」 そして この「()」の中の引数の 1つ目は 上で作成したこちらの 描画したいデータ そして 2つ目の引数 こちらには この部分のオプションですね このように指定してあげることで 上記の内容を反映させた 横に伸びる棒グラフを 描画することができます それでは こちらの「index.html」を ブラウザで開いてみましょう これが 「index.html」ファイルを ブラウザで開いた状態です このように 横に伸びる棒グラフが 出来上がっていますね こちらのグラフの縦軸には 年齢を表す 「6歳」「7歳」「8歳」といった 文字列が表示されていますね そして こちらの青いバーは 男子の平均身長を表していて そして こちらの赤いバーは 女子の平均身長を表しています このように表示されてくれば きちんと プログラムの実装が完了できている といった形になります 以上で レッスンは終了です 今回は Google Chartsと準備したデータを利用して 実際に横に伸びる棒グラフを 描画する方法について解説いたしました 以降のレッスンでは このGoogle Chartsで描画した グラフのスタイルを設定する方法について 解説いたしますので そちらもあわせてご覧ください

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

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

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

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

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

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