CanvasとJavascriptでグラフを描いてみよう

今回は「HTML5　API」の機能の１つである「Canvas」の使い方を紹介します。

Canvasとはブラウザ上で図を描くためのHTML5が用意している機能です。通常グラフをコンテンツとして扱う場合、jpegやpng形式の画像ファイルを用いることも多いですが、Canvasを使えばHTML/CSS/Javascriptを使って棒グラフ、円グラフといった図を描くことが可能です。

Canvasで作成する棒グラフ

Canvasで描くグラフはHTML/CSS/Javascriptで作成しているのでデザインやグラフの数値を容易に変更できます。つまり使い回しやメンテナンス、簡単に更新が出来るというメリットがあるといえますね。

以下、棒グラフ作成のためのコードをご紹介します。

HTML

canvas要素を記述してグラフを描く準備をします

<section>
  <h1>Z社のデバイス別売上比率（2015年3月）</h1>
  <canvas>
    canvas要素が利用できるWebブラウザで開いてください。
  </canvas>
</section>

CSS

section, h1, canvasの各要素のスタイルとなります。こちらはサイトのテイストに合わせてカスタマイズしてください。

section{
	width: 360px;
	margin: 16px;
}
h1{
	-moz-box-shadow: 0 5px 5px -3px black;
	-webkit-box-shadow: 0 5px 5px -3px black;
	box-shadow: 0 5px 5px -3px black;
	background: orange;
	color: black;
	font-size: 20px;
	padding: 2px 4px;
	margin: 1em 0 0.5em 0;
	border-radius: 6px;
}
canvas {
	width: 360px;
	height: 180px;
	-moz-box-shadow: 0 5px 5px -3px black;
	-webkit-box-shadow: 0 5px 5px -3px black;
	box-shadow: 0 5px 5px -3px black;
	border: solid 2px orange;
	border-radius: 8px;
	padding: 6px;
	background: white;
}

Javascript

グラフの情報を配列変数を使って記述してるので、値を動的に変更することが可能です。

<script>
　　//配列変数device_dataにグラフの情報を定義。
    //nameはデバイス名、ratioが比率、colorがグラフの色の情報となります。
    device_data = [
      {name:'スマートフォン', ratio:54.6, color:'red'},
      {name:'PC', ratio:43.5, color:'blue'},
      {name:'ガラケー', ratio:1.9, color:'green'},
    ];
    window.addEventListener('load', 
      function(event){
        drawGraph();
      }
    , false);
    //グラフ描画
    function drawGraph(){
      var cvs = document.querySelector('canvas');
      var context = cvs.getContext('2d');
　　//棒グラフの長さ基準を定義
      var std_value = 30;
      var std_width = 200;
   //fontプロパティに文字サイズ、フォント名を定義
      context.font = '10 Arial';
      for (var i = 0; i < device_data.length; i++) {
   //文字の色
      context.fillStyle = 'black';
   //（デバイス名の）テキストを描画
      context.fillText(device_data[i].name + '(' + device_data[i].ratio + '%)', 0, 28*i+18);
   //棒グラフの色
        context.fillStyle = device_data[i].color;
   //棒グラフを描画
      context.fillRect(
          65, 28*i + 4,
          std_width / std_value * device_data[i].ratio,
          20
        );
      }
    }
</script>

ＨＴＭＬ5で表現する時代

HTML5では今回ご紹介したグラフだけでなく、動画の再生のための「Video」、GPSやWi-Fiから現地情報を取得するための「Geolocation」などJavascriptをつかって制御するAPIがたくさん用意されています。テキストや画像に加えて、これらを有効に利用することリッチなコンテンツのWEBサイトを作っていきましょう！

市川