柱状图

最新推荐文章于 2024-03-27 09:00:00 发布

风丶叶

最新推荐文章于 2024-03-27 09:00:00 发布

阅读量255

点赞数

本文链接：https://blog.csdn.net/weixin_43692082/article/details/84953278

版权

柱状图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<style type="text/css">
			canvas {
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
	<canvas width="800" height="500"></canvas>
	<script type="text/javascript">
		var myline = document.querySelector("canvas");
		var ctx = myline.getContext("2d");
		var canvasW = ctx.canvas.width;
		var canvasH = ctx.canvas.height;
		var grad = 50;
		var x0 = grad;
		var y0 = canvasH-grad;
		var arr = [400,300,200,100,0];
		var brr = ["haha","Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
		//网右
		for(var i = 4; i >= 0;i--){
			ctx.moveTo(x0+5.5,100*i+50.5);
			ctx.lineTo(canvasW-grad,100*i+50.5);
			ctx.strokeStyle ="#eee";
			ctx.stroke();
		}
		//网左
		ctx.beginPath();
		for(var j = 4; j >= 0;j--){
			ctx.moveTo(x0,100*j+50.5);
			ctx.lineTo(x0+5.5,100*j+50.5);
			ctx.strokeStyle ="#000";
			ctx.stroke();
			ctx.fillText(arr[j],x0-20,100*j+50.5);
			ctx.textBaseline = "middle";
			ctx.font = "10px 微软雅黑";
		}
		//网下
		for(var k = 1; k < 8;k++){
			ctx.moveTo(100*k,y0);
			ctx.lineTo(100*k,y0+5.5);
			ctx.strokeStyle ="#000";
			ctx.stroke();
			ctx.fillText(brr[k],100*k,y0+15);
			ctx.textAlign="center";
			ctx.font = "10px 微软雅黑";
		}
		//X轴
		ctx.beginPath();
		ctx.moveTo(x0,y0+0.5);
		ctx.lineTo(canvasW-grad,y0+0.5);
		ctx.strokeStyle = "#000000";
		ctx.stroke();
		//Y轴
		ctx.moveTo(x0+5.5,y0);
		ctx.lineTo(x0+5.5,grad);
		ctx.strokeStyle = "#000000";
		ctx.stroke();
		//数据
		var crr = [
		{
			x:25,
			y:20
		},   
		{    
			x:125,
			y:50
		},   
		{    
			x:225,
			y:200
		},   
		{    
			x:325,
			y:330
		},   
		{    
			x:425,
			y:390
		},   
		{    
			x:525,
			y:320
		},   
		{    
			x:625,
			y:220
		},
		];
		ctx.beginPath();
		for(var a = 0; a < 7;a++){
			ctx.fillStyle = "#00f";
			ctx.fillRect(x0+crr[a].x,y0-crr[a].y,50,crr[a].y);
		}
	</script>
	</body>
</html>

上图：
效果图