記事の内容やaishipシリーズに関するお問い合わせはこちらから

0120-173-163 お電話

[電話受付時間]平日9:30〜19:00

TOP

CATEGORY

SERVICE

HTML5 「Canvas」で更新可能なグラフを作る3つのステップ

HTML5 「Canvas」で更新可能なグラフを作る3つのステップ

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

今回は「HTML5 API」の機能の1つである「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>

HTML5で表現する時代

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

市川

                   
クラウドECのサイト構築はaishipR-カスタマイズ可能なASP実績No.1

累計2000社以上の導入の総合通販型カートシステムで、カスタマイズ性が高く、デザインの自由度はもちろん、各種システムとの連携や機能追加等も独自のカスタマイズができるため、こだわりのある本格的な通販を月額9,800円から実現できます。 またモバイルファースト設計や月2回の無償バージョンアップなどの特徴があり、使いやすさと最新性を追求した通販サイトを構築できます。 さらに信頼性の高いサーバーを採用しており大規模アクセスにも対応できるため、これからさらに通販での売上を伸ばされたい事業者様におすすめです。
         

レスポンシブWebデザインカテゴリの最新記事