經過前面三節，這一節準備做點實用的，那就是柱狀圖。
直接上代碼，這一節沒有什么新知識，就是前面的知識運用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #000;}
#c1{
background: #fff;
padding:50px;
}
</style>
<script>
//隨機數
function rnd(m,n){
return parseInt(m+Math.random()*(n-m));
}
document.addEventListener('DOMContentLoaded',function(){
var oC = document.getElementById('c1');
var gd = oC.getContext('2d');
//畫x軸
gd.beginPath();
gd.strokeStyle = "black";
gd.lineWidth = 2;
gd.moveTo(10,590);
gd.lineTo(760,590);
gd.stroke();
gd.beginPath();
gd.moveTo(700,590);
gd.lineTo(690,580);
gd.stroke();
gd.beginPath();
gd.moveTo(700,590);
gd.lineTo(690,600);
gd.stroke();
//畫y軸
gd.beginPath();
gd.moveTo(10,590);
gd.lineTo(10,10);
gd.stroke();
gd.beginPath();
gd.moveTo(10,10);
gd.lineTo(0,20);
gd.stroke();
gd.beginPath();
gd.moveTo(10,10);
gd.lineTo(20,20);
gd.stroke();
//首先需要有一些數據，先創造一些，可以用ajax獲取服務器數據
var arr=[300,200,50,800,150,900];
//最大，求數組里面的最大值
var iMax = Math.max.apply(null,arr);
var aHeight = [];
for(var i = 0;i<arr.length;i++){
//找到最大值，以最大值為標準，也就是最大值的高是畫布的高，將求出的數據存到aHeight
aHeight[i] = arr[i]/iMax*(oC.height - 50);
}
//計算單個柱狀圖的高
var w = (oC.width-50)/(aHeight.length*3-2);
//兩個柱狀圖之間的距離
var iSpace = w*2;
for(var i = 0;i<aHeight.length;i++){
//隨機顏色
gd.fillStyle = 'rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';
//畫填充矩形
gd.fillRect(i*(w+iSpace)+10,oC.height - aHeight[i]-10,w,aHeight[i]);
}
},false);
</script>
</head>
<body>
<canvas id="c1" width="700" height="600"></canvas>
</body>
</html>
效果圖：
Paste_Image.png
