JavaScriptで棒グラフを描画する

手順

以下の二つのファイル

  • test.html
  • test.js

を作成する

test.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>JavaScript Sample</title>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">document.addEventListener('DOMContentLoaded', function(){main();});</script>
</head>
<body>
<div id="test_canvas"></div>
</body>
</html>

test.js

var main = function() {
  var targetDiv = document.getElementById('test_canvas');
  if (targetDiv == null) {
    return;
  }
  var canvas = document.createElement("canvas");
  canvas.height = 500;
  canvas.width = 500;
  targetDiv.appendChild(canvas);
  var ctx = canvas.getContext("2d");
  var array = [8,256,32,128,100,64];
  drawChart(ctx, array);
}

var drawChart = function(canvasCtx, array) {
  for(var i = 0; i < array.length; i++) {
    var width = 20;
    var height = array[i];
    var x = i * width * 2;
    var y = 300 - height;
    canvasCtx.fillRect(x, y, width, height);
  }
}

実行結果

参考

JavaScriptでCanvasに描画する

シェアする

  • このエントリーをはてなブックマークに追加

フォローする