HTML5中canvas画图之绘制数据图表

悠悠 2022-08-23 08:10 302阅读 0赞

上一篇博文绘制了一个方格图，现在来绘制一个数据图表。实现的效果如下:

![Center][]

实现代码如下:

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>数据图表</title>
    </head>
    <body>
    	<canvas id="canvas" width="300" height="300"></canvas>
    	<script type="text/javascript">
    		//定义图表数据
    		var uriage=[80,92,101,110,68,50,45,90,74,68,98,103];
    		drawChart(uriage);
    		//绘制折线数据图表的函数
    		function drawChart(data){
    			//获取上下文
    			var canvas=document.getElementById("canvas");
    			var ctx=canvas.getContext("2d");
    			//描绘背景
    			var gradient=ctx.createLinearGradient(0,0,0,300);
    			gradient.addColorStop(0,"#e0e0e0");
    			gradient.addColorStop(1,"#ffffff");
    			ctx.fillStyle=gradient;
    			ctx.fillRect(0,0,canvas.width,canvas.height);
    			//计算坐标
    			var grid_cols=data.length+1;
    			var grid_rows=4;
    			var cell_width=canvas.width/grid_cols;
    			var cell_height=canvas.height/grid_rows;
    			//绘制背景的方格线
    			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.lineWidth=1;ctx.strokeStyle="#c0c0c0";
    				ctx.stroke();
    				//获取数据中最大值
    				var max_v=0;
    				for(var i=0;i<data.length;i++)
    					{
    						if(data[i]>max_v)
    							max_v=data[i];
    					}
    					//为了能让最大值能容纳在图表内，计算坐标
    					max_v=max_v*1.1;
    					//将数据转换为坐标
    					var points=[];
    					for(var i=0;i<data.length;i++)
    						{
    							var v=data[i];
    							var px=cell_width*(1+i);
    							var py=canvas.height-canvas.height*(v/max_v);
    							points.push({"x":px,"y":py});
    						}
    						//描绘折线
    						ctx.beginPath();
    						ctx.moveTo(points[0].x,points[0].y);
    						for(var i=1;i<points.length;i++)
    							{
    								ctx.lineTo(points[i].x,points[i].y); 
    							}
    							ctx.lineWidth=2;
    							ctx.strokeStyle="#ee0000";
    							ctx.stroke();
    							//绘制坐标图形（坐标对于一红色圈圈）
    							for(var 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>
    </body>
    </html>

[Center]: /images/20220721/408cba78d9a94bf3843fb54091242bdd.png