經(jīng)過(guò)前面三節(jié)，這一節(jié)準(zhǔn)備做點(diǎn)實(shí)用的，那就是柱狀圖。
直接上代碼，這一節(jié)沒(méi)有什么新知識(shí)，就是前面的知識(shí)運(yùn)用：
<!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>
//隨機(jī)數(shù)
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();
//首先需要有一些數(shù)據(jù)，先創(chuàng)造一些，可以用ajax獲取服務(wù)器數(shù)據(jù)
var arr=[300,200,50,800,150,900];
//最大，求數(shù)組里面的最大值
var iMax = Math.max.apply(null,arr);
var aHeight = [];
for(var i = 0;i<arr.length;i++){
//找到最大值，以最大值為標(biāo)準(zhǔn)，也就是最大值的高是畫布的高，將求出的數(shù)據(jù)存到aHeight
aHeight[i] = arr[i]/iMax*(oC.height - 50);
}
//計(jì)算單個(gè)柱狀圖的高
var w = (oC.width-50)/(aHeight.length*3-2);
//兩個(gè)柱狀圖之間的距離
var iSpace = w*2;
for(var i = 0;i<aHeight.length;i++){
//隨機(jī)顏色
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
