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

散布図の描画

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

ぜひご覧ください。

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

字幕

このレッスンではGoogle Chartsと 準備したデータを利用して 実際に散布図を描画する方法について 解説いたします まずはダウンロードしてきたこちらの 「scatter_chart」という フォルダの中に入っている この「index.htmlファイル」を エディタで開いてください そしてこれがそのファイルを開いた状態です このファイルを使って今回のレッスンの解説を 進めていきたいと思います それではさっそくレッスンを始めていきましょう まずは前回までのレッスンのおさらいです 前回までのレッスンで まずは散布図を作るための「data」とそして 「option設定」を行ってきました 今回はこの「data」と「option設定」を利用して 実際に散布図を描画してみたいと思います 今回注目していただきたい部分は こちらの部分となります それでは順番に見ていきましょう まず「変数chart」を作成しています そしてそのあとに 「new google.visualization」 「ScatterChart ( );」と書いています この「ScatterChart」のあとの 「( )」の中ですが これはその散布図を描画したい HTML要素を指定しています 要するに「chart」という名前の 「id」が付いた要素ということですね そしてこちらの 「ScatterChart」の部分では 散布図を描画するために このように「ScatterChart」と書いています この部分は描画したい図表に基づいて 内容を変更していく形でしたね 例えば円グラフなら「πChart」 横棒グラフなら「barChart」 といった形でしたね そしてここまで記述したら この「変数chart」には 散布図を描画するための 準備が整いました 次はこの「変数chart」を使って 実際に散布図を描画してみます まずはこの「変数chart」と書いて「.」 そして図表を描画するため 「draw」と書きます そして「( );」、そしてこちらの第一引数には 上で定義したこちらのdataをセットします そしてこちらの第二引数の「options」は こちらも上で定義した この「option設定」ですね この変数をセットします このようにすることで 準備した「data」と「option設定」の内容をベースに 散布図を描画することができるわけですね それではこの状態で この「index.htmlファイル」を ブラウザで開いて 内容を確認してみましょう ブラウザで開くと このように表示されてきましたね まずこちらの縦軸には体重 そしてこちらの横軸には身長が入っています そしてそれぞれが交わるところに このようにデータが描写されていますね このように表示されてこれば きちんとプログラムの実装が完了している といった形になります 以上でレッスンは終了です 今回はGoogle Chartsと 準備したdataを利用して 実際に散布図を描画する方法について 解説いたしました 以降のレッスンでは このGoogle Chartsで描画した グラフの凡例 この部分ですね この部分を非表示にする方法について 解説いたしますので そちらも併せてご覧ください

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

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

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

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

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

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