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

最新推荐文章于 2025-06-16 09:22:22 发布

花2不谢

最新推荐文章于 2025-06-16 09:22:22 发布

阅读量5.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签： canvas html5 数据

本文链接：https://blog.youkuaiyun.com/qq_25821067/article/details/51638488

HTML5 专栏收录该内容

6 篇文章

订阅专栏

这篇博客介绍了如何使用HTML5的canvas元素绘制数据图表，包括实现的具体效果和关键代码展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

实现代码如下:

<!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>