canvas实现走势图实现

最新推荐文章于 2021-08-05 10:56:58 发布

橙虚缘

最新推荐文章于 2021-08-05 10:56:58 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html、css

本文链接：https://blog.youkuaiyun.com/qq43599939/article/details/78552433

html、css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用HTML5 Canvas绘制走势图的方法。通过随机生成数据并在表格中显示，同时利用Canvas在表格单元格间绘制连线来形成走势图。文章提供了完整的代码示例。

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

网上看了参考，然后自己实现了一遍，走势图主要用canvas实现（一个后端写前端，好尴尬）

先看下效果，数据随机产生

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>走势图</title>
		<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	</head>
	<body>
		<style>
			.div{width:50%;margin:0 auto;margin-top:50px}table{border:0;margin:0;border-collapse:collapse;border-spacing:0;font-size:11px;font-family:Arial;margin:0 auto}table td,table th{padding:0;border:1px solid #d8d8d8;height:40px;width:40px;text-align:center;color:#666}.tt{background-color:#ff4500;color:#fff}canvas{position:absolute}
		</style>
		<div>
			<table id="table">
	            <thead></thead>
	            <tbody></tbody>
	        </table>
	         <div id="canvasdiv">
	        </div>
        </div>
        
		<script>
			
			var row = 15;
			
			generate_table();
			
         	generate_line(generate_random_data());
         	
         
			function generate_table()
			{
				var tbody = "";
	            var head = "<tr>";
	            for (var i = 1; i <= row; i++) {
	                head += "<th>data-" + i + "</th>";
	                tbody += "<tr>";
	                for (var j = 1; j <= row; j++) {
	                    tbody += "<td class='dd" + i + "_" + j + "'>" + j + "</td>";
	                }
	                tbody += "</tr>";
	            }
	            head += "</tr>";
	            $("#table thead").html(head);
	            $("#table tbody").html(tbody);
			}
			
			function generate_random_data()
			{
				var ids = "";
	            for (var i = 1; i <= row; i++) {
	                ids+= "dd" + i + "_" + Math.floor(1 + Math.random() * (row)) + ",";
	                if(i==row)
	                	ids = ids.substring(0, ids.length - 1);
	            }
	            return ids;
			}
			
			function generate_line(ids)
			{
				var list = ids.split(",");
				
				for (var i = 0; i <= list.length-2; i++) {
					
					var now_class = $("." + list[i]);
                	var next_class = $("." + list[i + 1]);
                    
                    now_class.attr('class', 'tt')
                    if(i==list.length-2)
                    	next_class.attr('class', 'tt')
             
					var now_n = now_class.offset();
					var next_n = next_class.offset();
					
					var now_n_width = now_class.outerWidth();
	                var now_n_height = now_class.outerHeight();
					
					var now_n_top = now_n.top;
	            	var now_n_left = now_n.left;
	            	
	            	var next_n_top = next_n.top;
	            	var next_n_left = next_n.left;
	                
					var c = document.createElement("canvas");
					c.width = $(window).width();
	                c.height = $(document).height();
	                
	                c.style.top = 0+ parseInt(now_n_height / 2)+'px';
	                c.style.left = 0+ parseInt(now_n_width / 2)+'px';
	                
					var cxt = c.getContext("2d");
					
					
					cxt.lineWidth = 1;
	                cxt.lineJoin = "round";
	                cxt.beginPath();
					cxt.moveTo(now_n_left,now_n_top);
					cxt.lineTo(next_n_left,next_n_top);
					cxt.lineWidth = 2;
					cxt.strokeStyle = "#000080";
					cxt.stroke();
					
					$("#canvasdiv").append(c);
				}
					
			}
			
		
		</script>
		
		
		
	</body>
</html>