図表描画用のHTMLコーディング - JavaScriptのチュートリアル

このレッスンでは 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で…