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

<横>棒グラフの為のデータの準備と設定

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

ぜひご覧ください。

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

字幕

このレッスンでは 横棒グラフを描画するための 実際のデータの準備と設定方法について 解説いたします まずはダウンロードしてきた こちらの「prepare_data_for_bar」の フォルダーの中に入っている こちらの「index.html」ファイルを 「エディタ」で開いてください そして これが そのファイルを開いた状態です このファイルを使って 今回のレッスンの解説を 進めていきたいと思います それでは 早速 レッスンを始めていきましょう 今回 注目して頂きたい部分は こちらの部分となります 今回 Google Chartsを使って 横棒グラフを生成するにあたって 2つのデータを 同時に表示させていきたいと思います 今回は 男女の年齢別 青少年の平均身長を グラフにしたいと思います それでは 順番に見ていきましょう まずは 前回までのレッスンと同様 変数を作って 名前を「data」としています そして その中にこのように書いて データを格納するための箱を作ってあげます そして 次にこちらの部分です こちらの部分では その箱に 3つの異なるデータを 格納できるように 枠を作成しています 1つ目は 縦軸の項目となる こちらの「年齢」という項目です ここでは 「string」を第1引数に設定して 文字列のデータを 取り扱うようにしています そして 2つ目は「男子(単位:cm)」 というタイトルを入れ込んでいます ここからは実際のデータですね そして ここの第1引数に 「number」を入れ込むことによって 数値を格納できるようにしています そして 3つ目も同様 こちらは女子のパターンですね 同じように 第1引数に「number」を指定して 数値を格納できるようにしています そして ここで作成した 3つのデータの枠に 実際のデータを格納していきます 実際のデータを格納しているのが こちらの部分ですね 左から順番に まずは年齢 ここでは 文字列で「6歳」としていますね そして 2つ目は男子の身長です こちらは男子の身長 そして 3つ目 この部分は女子の身長ですね このように順番に 「6歳」「7歳」「8歳」「9歳」 といった形で データを配列で作成していきます そして 一通り データの入れ込みが完了したら 最後に こちらの「オプション設定」の部分で 「タイトル」を設定してあげましょう 「タイトル」は文字列で 今回はこのように設定しています このようにすることで グラフと同時に こちらの「タイトル」の方も 表示されてくるわけですね 以上で レッスンは終了です 今回は 横の棒グラフを描画するための 実際のデータの準備と設定方法について 解説いたしました 以降のレッスンでは Google Chartsと準備したデータを利用して 実際に横棒グラフを描画する方法について 解説していきますので そちらもあわせてご覧ください

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

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

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

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

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

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