HTML画布canvas画带有圆圈的折线图（正在补充）

没有x和y轴的箭头

html代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>折线</title>
		<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	</head>

	<body>
		
		<div style="height: 300px;">
			<canvas id="myCanvas"></canvas>
			<canvas id="yuan"></canvas>
		</div>
		
		<script type="text/javascript">
			
			$(document).ready(function(){
				
//				画个圆
				var y=document.getElementById("yuan");
				var yuan=y.getContext("2d");
				
//				折线图的x轴和y轴
				yuan.beginPath();
				yuan.lineWidth = "2";
				yuan.strokeStyle = "black";
				yuan.moveTo(0,0);
				yuan.lineTo(0,150);
				yuan.lineTo(620,150);
				yuan.stroke();
				
				yuan.beginPath();
				yuan.lineWidth="2";
				yuan.strokeStyle="crimson";

				$.ajax({
					type:"post",
					url:"json.php",
					dataType:"json",
					async:false,
					success:function(data){
//						获取总数值条数，下一步需要拟定为数据库前三十一条
						var numdata = data.length;
//						alert(numdata);
						for(var i=0;i<numdata;i++){
							var user=data[i];
//							价钱
							var a=user.vprice;
//							日期
							var c=user.timestame;
//							画折线
							var x=(i+1)*20;
							var y=150-a*20;
//							画个端点圆
							yuan.arc(x,y,2,0,2*Math.PI);
							yuan.stroke();
						}
					},
					error:function(data){
						console.log("错误");
					}
				});
				
		});
		</script>
	</body>

</html>

php代码

<?php

	require "php/conndb.php";

	$sql = "SELECT * FROM vegetables";  
	$result = $conn->query($sql);  
  
	$arr = array();  
	// 输出每行数据  
	while($row = $result->fetch_assoc()) {  
    	$count=count($row);//不能在循环语句中，由于每次删除row数组长度都减小  
    	for($i=0;$i<$count;$i++){  
        	unset($row[$i]);//删除冗余数据
    	}  
    	array_push($arr,$row);  
  
	}  
	//print_r($arr);  
	echo json_encode($arr,JSON_UNESCAPED_UNICODE);//json编码  
	
?>

数据表设计：

HTML画布canvas画带有圆圈的折线图（正在补充）

猜你喜欢