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

円グラフの為のデータの準備と設定

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

ぜひご覧ください。

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

字幕

このレッスンでは Google Chartsを使って 円グラフを描画するための 実際のデータの準備と設定方法について 解説いたします まずはダウンロードしてきた こちらの「prepare_data_for_pie」という フォルダーの中に入っている この「index.html」ファイルを 「エディタ」で開いてください そして これが そのファイルを開いた状態です このファイルを使って 今回のレッスンの解説を 進めていきたいと思います それでは 早速 レッスンを始めていきましょう 今回は 円グラフにするための データを設定する方法について 見ていきたいと思います 今回 注目して頂きたい部分は こちらの部分となります この部分は 前回のレッスンで作成した こちらのコールバック関数 「drawChart」ですね こちらの「{ }」の中に記述しています そして この部分で 実際に グラフにしたいデータを 設定しています 今回は サンプルとして 日本における 家族構成の割合のデータを 図表にしてみたいと思います それでは順番に どのようにデータを設定しているか 見ていきたいと思います まずは こちらの1文から この部分では 変数「data」を作って その中に Google Chartsで利用することができる データを入れる箱ですね その箱を生成して そして こちらの変数「data」に格納しています わかりやすくいうと こちらの「Excelファイル」の この表の枠を作った といったイメージに近いでしょうか そして その次に こちらの2行の処理について 見ていきたいと思います これらの処理は その作成したデータを入れ込むための 箱の中に さらに2つの枠を作成して それぞれに 異なるデータを 入れ込めるようにしている処理です わかりやすくいうと このような感じですね ここでは 「家族構成」というタイトルの列が1つ そして 「単位」という列が1つありますね このように それぞれの列を作成している といった状態になります ここの記述の方法なのですが まずは 先ほどの変数「data」と書いて 「.addColumn」と書きます そして 「( );」と書いて そして 1つ目の引数には データの種類を記入します この「家族構成」のデータは 文字列のデータで構成されているので ここには それを意味する「string」と記入します そして 2つ目の引数 こちらには そのデータのタイトルを記入してあげます このように 今回は「家族構成」としていますね 要するに ここの箱を作成したという形になります そして こちらの部分も同様ですね こちらの部分では この第1引数を 「number」としています 要するに 数値ということですね ここを「number」とすることで こちらの「Excel表」のように このように 数値の値を 入れ込むことができるようになるわけですね そして そのデータのタイトルは 「単位:%」という形で まさに この部分の箱を 作ったという形になりますね そして この 次に続く処理ですが こちらの部分ですね こちらの部分では 実際に その箱の中に入れていく データを指定していきます 記述の仕方ですが まずは 先ほどの変数 「data」と書いて 「.」 そして「addRows」と書きます そして「( )」 そしてさらに 「[ ]」を中に書きます こうすることで 配列のデータを生成しています そして 実際にその中に さらに 配列で ここのデータを入れ込んでいきます まずは こちらの「家族構成」のデータから 今回は 「夫婦のみ」と書いて そして 次に 2つ目のデータ「単位」ですね ここでは 「19.8」と書いています 要するに 「19.8%」ということですね このような形で 1つ1つのデータを入れ込んでいきます こちらの「Excelの表」で見ると このような形ですね 「夫婦のみ」 「19.8」 そして 「夫婦と子供」 「27.9」 といった形で こちらにも 順番に配列で記入していきます こちらのコードだけを見ていると 少し難しく感じますが このように 実際の表と見比べると そのイメージがつかみやすいかもしれません 以上で レッスンは終了です 今回は Google Chartsを使って 円グラフを描画するための 実際のデータの準備と設定方法について 解説いたしました 以降のレッスンでは Google Chartsのオプション設定機能を使って 図表をカスタマイズする方法について 解説いたしますので そちらもあわせてご覧ください

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

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

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

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

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

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