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

線グラフの描画

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

ぜひご覧ください。

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

字幕

このレッスンでは Google Chartsと準備したデータを利用して 実際に線グラフを描画する 方法について解説致します まずはダウンロードしてきた こちらの「line_chart」 というフォルダの中に入っている この「index.html」ファイルを エディタで開いてください そしてこれがそのファイルを 開いた状態です このファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう それではまず前回までの レッスンのおさらいです 前回はこちらの部分で 線グラフに描画するための データを作成しました そしてこちらの部分で その線グラフのタイトル の設定とそしてこちらの「vAxis」で 縦軸の項目のタイトルを 表示するように設定しました また前回のレッスンに補足する形で こちらに「lineWidth」という項目を設定しています この部分はその名のとおり 描画する線グラフの線の太さを 指定することができる項目となっていて 今回は5という形で設定しています それでは実際にこのデータ とこのオプション設定をベースに 線グラフを描画していってみたいと思います 今回注目して頂きたい部分は こちらの部分となります それでは順番に見ていきましょう まずは変数「chart」を作成して その中に 「new google.visualization.LineChart」 「()」 の「;」としています そしてこの「LineChart」の後の括弧の中には その線グラフを描画したい HTMLの要素を指定しています 今回は「getElementById('chart')」 という形になっているので 「id chart」がついたこちらの「div」タグ の中に表示しろ という形になります そして今回は線グラフを描画したいので こちらの部分には「LineChart」 を指定しています この部分は描画したい図表の内容によって 変えていきます たとえば以前のレッスンで 作成した円グラフでしたら こちらは「piechart」となっていましたね さて ここまで記述できたら こちらの変数「chart」には 線グラフを描画するための 準備が整いました この変数「chart」を利用して 上で定義したデータとオプション設定 を取り込んで実際に線グラフを 描画していってみたいと思います それがこちらの部分となります まずは変数「chart」と書いて「.draw」と書きます そして 括弧 括弧閉じるのセミコロン そして第一引数には 上で定義したこちらのデータですね その変数データを設定して そして第二引数には こちらも この部分で設定したオプション設定ですね ここにその変数「options」を設定しています こうすることによって このデータとオプション設定に基づいた 線グラフを描画することが できるようになるわけです それではこの状態で このindex.htmlファイルを ブラウザで開いて 内容を確認してみましょう これがその「index.html」ファイルを 開いた状態です このように線グラフで三つのデータが 表示されてきましたね 青が日本 そしてオレンジがイギリス そして赤がアメリカですね そして横軸にはその年代が入っています 1995年から2000年 2000年から2005年 といった形ですね そしてこちらの縦軸には出生率が 表示されています そしてオプション設定で指定したとおり このように縦軸のタイトルも 表示されてきていますね このように表示されてこれば きちんとプログラムの実装が 完了しているといった形になります 以上でレッスンは終了です 今回はGoogle Chartsと準備した データを利用して 実際に線グラフを描画する 方法について解説致しました 以降のレッスンでは このGoogle Chartsで描画した 線グラフのカーブタイプ を設定する方法について 解説致しますので そちらもあわせて ご覧ください

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

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

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

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

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

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