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

<縦>棒グラフの描画

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

ぜひご覧ください。

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

字幕

このレッスンでは Google Chartsと準備したデータを利用して 実際に縦に伸びる棒グラフ を描画する方法について解説致します まずはダウンロードしてきた こちらの「column_chart」 というフォルダの中に入っている この「index.html」ファイルを エディタで開いてください そしてこれがそのファイルを エディタで開いた状態です このファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを 始めていきましょう まずは前回までのレッスンのおさらいです 前回までのレッスンで 縦に伸びる棒グラフを生成するためのデータ そしてその縦棒グラフの タイトルを設定しました 今回はこのデータと オプション設定を利用して 実際に縦に伸びる棒グラフを 描画してみたいと思います 今回注目して頂きたいのは こちらの部分となります それでは順番に見ていきます まずは変数「chart」を作って 「=」と書いてその後に 「new google.visualization.ColumChart」 「()」  「;」と書きます そしてこの括弧の中には その棒グラフを描画したい HTMLの要素を指定してあげます そして今回は縦に伸びる棒グラフ を描画するためにこちらの部分を 「ColumChart」としています このようにすることでこちらの 変数「Chart」には この縦に伸びる棒グラフを 描画するための準備ができました 後は上で設定したデータとオプション設定 を取り込んで実際に描画するだけです その描画処理はこちらの部分となります 先ほどの変数「Chart」と書いて 「.draw」と書きます そして「()」  「;」と書いて この括弧の中の第一引数には 上記で設定したこちらのデータ そして第二引数には 上記で設定した こちらのオプションを入れ込んでいます これで縦に伸びる棒グラフの生成が完了しました それではこちらの「index.html」ファイルを ブラウザで開いて確認してみましょう そうするとこのように表示されてきましたね 横軸には選挙年月を表す文字列 がそれぞれの項目になっていて そして縦に伸びているバーは 青は男性 そして赤は女性を 表していますね そして縦軸には投票率を表す 数値が入っています このように描画されてこれば きちんとプログラムの実装が 完了しているといった形になります 以上でレッスンは終了です 今回はGoogle Chartsと準備したデータを利用して 実際に縦に伸びる棒グラフを 描画する方法について解説致しました 以降のレッスンでは このGoogle Chartsで 描画したグラフの縦軸 そして横軸にその要素の内容を 表記する方法について解説致しますので そちらもあわせて ご覧ください

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

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

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

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

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

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