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

円グラフの描画

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

ぜひご覧ください。

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

字幕

このレッスンでは Google Chartsと準備したデータを利用して 実際に 円グラフを描画する方法について 解説いたします まずはダウンロードしてきた こちらの「pie_chart」という フォルダーの中に入っている この「index.html」ファイルを 「エディタ」で開いてください そして これが そのファイルを開いた状態です このファイルを使いながら 今回のレッスンの解説を 進めていきたいと思います それでは 早速 レッスンを始めていきましょう 今回は これまでのレッスンで準備した データやオプション設定を使って 実際に 円グラフを作っていきます 今回 注目して頂きたい場所は こちらのファイルの中の こちらの部分となります こちらの部分で 実際に 円グラフを描画する処理を行っています それでは順番に どのように実装しているか 確認していきたいと思います まずは こちらの部分から こちらの部分では まずは変数を作成しています 「var」と書いて 変数の名前を 「chart」としています そして 「=」と書いて 「new google.visualization.PieChart」 と書いて 「( )」 そして「;」と書きます そして まず注目して頂きたいのが こちらの「( )」の中ですね この部分です この部分では 実際に 図表を表示したい HTMLの中の要素を指定してあげています ここでは 「document.getElementById」 そして「( )」 「chart」と書いていますね 要するに 「chart」というidが設定された 要素の中に 図表を表示しろ といった意味になります これは これまでのレッスンで作成した こちらの部分ですね この「id="chart"」がついた 「div」タグの中に 表示するといった命令になります そして もう1つ注目して頂きたいのが こちらの部分です こちらの部分では 「PieChart」と書いていますね 要するに 円グラフのことです この部分で 実際に 描画する図表の種類を 指定することができます これで こちらの変数「chart」には 円グラフを描画するための 「オブジェクトのインスタンス」が 格納されました この変数「chart」を使って 実際に描画をしていきます それが こちらの部分となります まずは 先ほどの変数「chart」と書いて 「.」 そして 描画するの意味の「draw」を書きます そして 「( );」 そして この「( )」の中の第1引数には 「data」という変数を入れています この「data」という変数は こちらの部分ですね これまでのレッスンで作成した 図表で表示したいデータです この変数「data」を こちらの第1引数に セットしてあげるわけです そして 「,」と書いて こちらの第2引数には これも 前回までのレッスンで作成した 「図表のオプション」ですね その「オプション設定」を こちらに設定してあげます こうすることによって こちらの「id="chart"」がついた 「div」タグの中に この円グラフが 表示されてくる形となります それでは こちらの「index.html」ファイルを ブラウザで開いてみましょう これが ブラウザで その円グラフを表示した状態です このように生成されてきます この円グラフには 今まで設定してきたデータが 表示されていて そして タイトルやグラフのサイズですね そういったオプション設定も 反映されてきています このように表示されてくれば きちんとプログラムの実装が できているといった状態になります それでは「エディタ」に戻ります さて これまで実装してきた こちらの円グラフを描画するための プログラムですが 基本的には 円グラフ以外の どのような図表であったとしても 同じような処理を書いていきます 異なってくるのは データの種類や こちらのオプション設定 そして 表示したいその図表の指定ですね こういったところのみが変わってきます 以降のレッスンでは この「HTMLファイル」をベースとして 円グラフ以外の 様々な図表の描画の仕方についても 解説していきますので そちらもあわせて参考にしてみてください 以上で レッスンは終了です 今回は Google Chartsと 準備したデータを利用して 実際に 円グラフを描画する方法について 解説いたしました 以降のレッスンでは Google Chartsを使って 横の棒グラフを描画する方法について 解説していきますので そちらもあわせてご覧ください

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

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

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

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

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

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