3. Canvas绘制数据图表

版权声明：一只会飞的狼 https://blog.csdn.net/sinat_40697723/article/details/83713573

一. Canvas绘制数据图表

1.绘制方格图：

方格图是为了最终绘制折线数据图表做准备的。绘制方格图只需要在Canvas上绘制一系列的横线与竖线。

	<canvas id="cas" width="300" height="300"></canvas>
	<script type="text/javascript">
		//获取上下文
		var canvas = document.getElementById("cas");
		var ctx = canvas.getContext("2d");

		//描绘背景
		var g = ctx.createLinearGradient(0,0,0,300);
		g.addColorStop(0, "#e0e0e0");
		g.addColorStop(1, "#ffffff");
		ctx.fillStyle = g;
		ctx.fillRect(0,0,canvas.width,canvas.height);

		//描绘边框
		var grid_cols = 10;
		var grid_rows = 10;
		var cell_height = canvas.height/grid_rows;
		var cell_width = canvas.width/grid_cols;
		ctx.lineWidth = 1;
		ctx.strokeStyle = "#a0a0a0";

		//结束边框描绘
		ctx.beginPath();

		//准备画横线
		for(var row=0; row<=grid_rows; row++){
			var y = row*cell_height;
			ctx.moveTo(0,y);
			ctx.lineTo(canvas.width,y);
		}

		//准备画竖线
		for(var col=0; col<grid_cols; col++){
			var x = col*cell_width;
			ctx.moveTo(x,0);
			ctx.lineTo(x,canvas.height);
		}

		//完成绘制
		ctx.stroke();
	</script>

效果图：

---

2.数据图表

绘制下表中商品销售数量的折线图：

商品12个月内的销售数量

1月	2月	3月	4月	5月	6月	7月	8月	9月	10月	11月	12月
80	92	104	10	68	50	45	90	74	68	98	103

	<canvas id="cas" width="300" height="300"></canvas>
	<script type="text/javascript">
		//获取上下文
		var canvas = document.getElementById("cas");
		var ctx = canvas.getContext("2d"); 

		//表格的数据
		var data = [80,92,104,10,68,50,45,90,74,68,98,103];

		//执行函数
		drawChart(data);

		//绘图函数
		function drawChart(data) {
			//描绘背景
			var g = ctx.createLinearGradient(0,0,0,300);
			g.addColorStop(0, "#e0e0e0");
			g.addColorStop(1, "#ffffff");
			ctx.fillStyle = g;
			ctx.fillRect(0,0,canvas.width,canvas.height);

			//描绘边框
			var col_num = data.length + 1;
			var row_num = 4;
			var cell_width = canvas.width/col_num;
			var cell_height = canvas.height/row_num;
			ctx.lineWidth = 1;
			ctx.strokeStyle = "#a0a0a0";

			//画横线
			ctx.beginPath();
			for(var row=0; row<=row_num; row++){
				var y = row*cell_height;
				ctx.moveTo(0, y);
				ctx.lineTo(canvas.width, y);
			};

			//画竖线
			for(var col=0; col<col_num; col++){
				var x = col*cell_width;
				ctx.moveTo(x, 0);
				ctx.lineTo(x, canvas.height);
			}

			//开始画线
			ctx.stroke();

			//找出数据中的最大值
			var max_data = 0;
			for(let i=0; i<data.length; i++){
				if (data[i] > max_data) {
					max_data = data[i];
				}
			}

			//纵坐标最大值
			var max_y = max_data * 1.1;

			//获取坐标值
			var points = [];
			for(let i=0; i<data.length; i++){
				var v = data[i];
				var px = cell_width*(i+1);
				var py = canvas.height - canvas.height*(v/max_y);
				points.push({"x":px, "y":py});
			}

			//绘制折线
			ctx.beginPath();
			ctx.moveTo(points[0].x, points[0].y);
			for(let i=1; i<data.length; i++){
				ctx.lineTo(points[i].x, points[i].y);
			}
			ctx.lineWidth = 2;
			ctx.strokeStyle = "#ee0000";
			ctx.stroke();

			//绘制坐标圆圈
			for(let i in points){
				var p = points[i];
				ctx.beginPath();
				ctx.arc(p.x, p.y, 6, 0, 2*Math.PI);
				ctx.fillStyle = "#ee0000";
				ctx.fill();
			}
 		}
	</script>

效果图：