经过前面三节，这一节准备做点实用的，那就是柱状图。
直接上代码，这一节没有什么新知识，就是前面的知识运用：
<!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
网友评论