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

グラフのスタイル設定

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
GoogleChartsで描画したグラフのスタイル(バーの色)を設定する方法について解説致します。
講師:
03:21

字幕

このレッスンでは Google Chartsで描画した グラフのスタイルを設定する 方法について解説いたします まずはダウンロードしてきた こちらのset_style というフォルダに中に入っている この「index.html」ファイルを エディタで開いてください そして これが そのファイルを開いた状態です このファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう 今回は前回のレッスンで作成した 横に伸びる棒グラフのバーの色 を変更してみたいと思います まずは前回のレッスンで作成した 横に伸びる棒グラフ のバーの色を確認して見たいと思います これが前回のレッスンで作成した 横棒グラフですね このように色は 男子が青 そして女子が赤でした 今回はこの二つのバーの色を 変更してみたいと思います それではエディタに戻ります そして今回この「index.html」ファイルで 注目して頂きたい部分が こちらの部分となります この部分は図表のオプションを 設定する箇所でしたね 今回はこのオプション設定に こちらの部分を追加しています こちらの部分でバーの色を 設定しているわけですね では順番に見ていきましょう まずはオプションの項目を 「colors」として そして「:」 そして「[」 「]」 そしてこの中に 二つの 色を表す文字列を入れています まず一つ目は 「green」という形で 色の名前をそのまま指定してあげています そして二つ目はこちら ピンク色を表すカラーコードを設定しています このように色を指定する場合は その色の名前やカラーコード を指定することで 色を変更することが可能になるわけです また この色の指定ですが データが定義された順番に指定していきます ですので 今回この「green」は 一つ目に書いていますが この一つ目は何かというと こちらでいう男子ですね そして 二つ目の このピンクを表すカラーコードですが 二つ目のデータとなるので こちらの女子 のデータになるわけです それでは この状態で 実際にこのindex.htmlファイルを ブラウザで確認してみましょう するとこのように バーの色が変更されて 表示されてきましたね このようにオプション設定では グラフの中で表示されるバーの色 といったものを変更することが可能です ぜひ このことを覚えておいて 自分なりのグラフを作成してみてください 以上で レッスンは終了です 今回はGoogle Chartsで描画したグラフのスタイルを 設定する方法について解説いたしました 以降のレッスンからは Google Chartsを使って 縦に伸びる棒グラフを描画する 方法について解説していきますので そちらもあわせてご覧ください

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

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

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

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

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

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