Canvas画布绘制折线图

最新推荐文章于 2024-07-03 09:18:53 发布

No25_Xu

最新推荐文章于 2024-07-03 09:18:53 发布

阅读量475

点赞数

分类专栏： Canvas 文章标签： canvas 折线图 css3

本文链接：https://blog.csdn.net/No25_Xu/article/details/83513152

版权

Canvas 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		canvas {
			border: 1px solid #ddd;
			margin: 100px;
		}
	</style>
</head>

<body>
	<canvas width="600" height="400"></canvas>
	<script type="text/javascript">
		/*构造函数*/
		var LineChart = function(ctx) {
			/*获取绘图工具*/
			this.ctx = ctx || document.querySelector("canvas").getContext("2d");
			/*画布的大小*/
			this.canvasWidth = this.ctx.canvas.width;
			this.canvasHeight = this.ctx.canvas.height;
			/*网格大小*/
			this.gridSize = 10;
			/*坐标系间距*/
			this.space = 10;
			/*坐标原点*/
			this.x0 = this.space;
			this.y0 = this.canvasHeight - this.space;
			/*箭头大小*/
			this.arrowSize = 10;
			/*绘制点*/
			this.dottedSize = 6;

		}
		/*行为方法*/
		LineChart.prototype.init = function(data) {
			this.drawGrid();
			this.drawAxis();
			this.drawDotted(data);
		}
		/*绘制网格*/
		LineChart.prototype.drawGrid = function() {
			/*x方向的线*/
			var xLineTotal = Math.floor(this.canvasHeight / this.gridSize);
			for(var i = 0; i <= xLineTotal; i++) {
				this.ctx.beginPath();
				this.ctx.moveTo(0, i * this.gridSize - 0.5);
				this.ctx.lineTo(this.canvasWidth, i * this.gridSize - 0.5);
				this.ctx.strokeStyle = "#ddd";
				this.ctx.stroke();
			}
			/*y方向的线*/
			var yLineTotal = Math.floor(this.canvasWidth / this.gridSize);
			for(var i = 0; i <= yLineTotal; i++) {
				this.ctx.beginPath();
				this.ctx.moveTo(i * this.gridSize - 0.5, 0);
				this.ctx.lineTo(i * this.gridSize - 0.5, this.canvasHeight);
				this.ctx.strokeStyle = "#ddd";
				this.ctx.stroke();
			}
		}
		/*绘制坐标系*/
		LineChart.prototype.drawAxis = function() {
			/*x轴*/
			this.ctx.beginPath();
			this.ctx.strokeStyle = "black";
			this.ctx.moveTo(this.x0, this.y0);
			this.ctx.lineTo(this.canvasWidth - this.space, this.y0);
			this.ctx.lineTo(this.canvasWidth - this.space - this.arrowSize, this.y0 + this.arrowSize / 2);
			this.ctx.lineTo(this.canvasWidth - this.space - this.arrowSize, this.y0 - this.arrowSize / 2);
			this.ctx.lineTo(this.canvasWidth - this.space, this.y0);
			this.ctx.stroke();
			this.ctx.fill();
			/*y轴*/
			this.ctx.beginPath();
			this.ctx.strokeStyle = "black";
			this.ctx.moveTo(this.x0, this.y0);
			this.ctx.lineTo(this.x0, this.space);
			this.ctx.lineTo(this.x0 + this.arrowSize / 2, this.space + this.arrowSize);
			this.ctx.lineTo(this.x0 - this.arrowSize / 2, this.space + this.arrowSize);
			this.ctx.lineTo(this.x0, this.space);
			this.ctx.stroke();
			this.ctx.fill();
		}
		/*绘制点*/
		LineChart.prototype.drawDotted = function(data) {
			/*转换成Canvas坐标*/
			/*绘制点*/
			/*连线*/
			var that = this;
			/*记录当前坐标*/
			var prevCanvasX = 0;
			var prevCanvasY = 0;
			data.forEach(function(item, i) {
				/*x=原点坐标+数据坐标*/
				/*y=原点坐标-数据坐标*/
				var canvasX = that.x0 + item.x;
				var canvasY = that.y0 - item.y;
				/*绘制点*/
				that.ctx.beginPath();
				that.ctx.moveTo(canvasX - that.dottedSize / 2, canvasY - that.dottedSize / 2);
				that.ctx.lineTo(canvasX + that.dottedSize / 2, canvasY - that.dottedSize / 2);
				that.ctx.lineTo(canvasX + that.dottedSize / 2, canvasY + that.dottedSize / 2);
				that.ctx.lineTo(canvasX - that.dottedSize / 2, canvasY + that.dottedSize / 2);
				that.ctx.closePath();
				that.ctx.fill();
				/*点的连线*/
				if(i == 0) {
					that.ctx.beginPath();
					that.ctx.moveTo(that.x0, that.y0);
					that.ctx.lineTo(canvasX, canvasY);
					that.ctx.stroke();
				} else {
					that.ctx.beginPath();
					that.ctx.moveTo(prevCanvasX, prevCanvasY);
					that.ctx.lineTo(canvasX, canvasY);
					that.ctx.stroke();
				}
				/*记录当前坐标*/
				prevCanvasX = canvasX;
				prevCanvasY = canvasY;
			})
		}
		/*初始化*/
		var data = [{
			x: 100,
			y: 100
		}, {
			x: 200,
			y: 200
		}, {
			x: 300,
			y: 300
		}, {
			x: 400,
			y: 200
		}, {
			x: 500,
			y: 100
		}]
		var LineChart = new LineChart();
		LineChart.init(data);
	</script>
</body>