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

図表描画用のHTMLコーディング

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
GoogleChartsを使って図表を描画する為の、基本的なHTMLコーディングの方法について解説致します。
講師:
02:49

字幕

このレッスンでは Google Chartsを使って 図表を描画するための 基本的なHTMLコーディングの方法について 解説いたします まずはダウンロードしてきた こちらの「html_coding」という フォルダーの中に入っている この「index.html」ファイルを 「エディタ」で開いてください そして これが そのファイルを開いた状態です このファイルを使って 今回のレッスンの解説を 進めていきたいと思います それでは 早速 レッスンを始めていきましょう このファイルは すでに Google Chartsを使って 図表を描画するための 必要最低限なHTMLコーディングを 完了している状態となっています Google Chartsを使って 図表を描画するための HTMLコーディングは非常にシンプルです 注目して頂きたいのは この部分ですね 要するに HTMLの中で 図表を描画したい部分を タグで囲ってあげて そのタグを JavaScriptからアクセスできるように 目印をつけてあげるだけで大丈夫です では 実際に どのようにコーディングをしているか 確認してみたいと思います 今回は このように 「div」タグを使って 図表を表示させるための枠をとっています そして その「div」タグには 「chart」という値をあてはめた 「id」を設定しています こうすることによって 後から JavaScriptで こちらの「div」タグに アクセスしやすくなります そして こちら「style」属性ですね この「div」タグに 「style」を設定して その中に スタイルシートをコーディングしています ここでは「width」 要するに 図表の横幅ですね そして 「height」 図表の縦幅です その大きさを指定しています このように この「div」タグに対して その要素の横幅と縦幅 要するにサイズですね それを指定してあげないと きちんと 図表が表示されてこない場合もありますので こちらは 忘れずに 指定しておくようにしておきましょう もちろん こちらのように 「div」タグの中に 直接スタイルシートを書き込む形ではなくて 外部CSSファイルに 記述して頂いても大丈夫です このようにHTMLコーディングしておいて 後ほど JavaScriptで こちらの「div」タグの中に 図表を表示するように 指定していきます 以上で レッスンは終了です 今回は Google Chartsを使って 図表を描画するための 基本的な HTMLコーディングの方法について 解説いたしました 以降のレッスンでは Google Chartsを利用するための ライブラリの読み込み方法について 解説いたしますので そちらもあわせてご覧ください

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

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

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

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

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

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