写个一个简单的canvas图表

侠客行

于 2013-07-10 15:16:47 发布

阅读量1.2k

点赞数

分类专栏： web 前端开发

本文链接：https://blog.youkuaiyun.com/aspwzmuma/article/details/9291209

版权

web 前端开发专栏收录该内容

71 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>canvas绘制图表</title>
<style type="text/css">
*{
	margin:0;
	padding:0;
}
body{
	text-align:center;
	background-color:black;
}
#c1{
	background-color:white;
}
</style>
<script type="text/javascript">
function rnd(n,m){
	return parseInt(Math.random()*(m-n)+n);
}
window.onload = function(){
	var canvas = document.getElementById('c1');
	var gd = canvas.getContext('2d');
	var aData = [100,200,300];
	var space = 20;
	var topSpace = 100;
	var iMax=Math.max.apply(null,aData)
	var w=40;
	var lastR=0;	//前一个柱子的right
	for(var i=0;i<3;i++){
		var l=lastR+space;
		var h=(aData[i]/iMax)*(canvas.height-topSpace);
		var t=canvas.height-h;
		gd.fillStyle='rgb('+rnd(0, 256)+', '+rnd(0, 256)+', '+rnd(0, 256)+')';
		gd.fillRect(l,t,w,h);
		lastR=l+w;
	}
}
</script>
</head>
<body>
    <canvas width='500' height="500" id="c1"></canvas>
</body>
</html>