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

补充2在上一画图原文中，只不过查询语句改了下，如下为多表查询后结果，因多表分组查询前x个的sql代码实在复杂，故先按多表查

php都是查询语句，不贴

下为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="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 = "chocolate";
				yuan.moveTo(0, 0);
				yuan.lineTo(0, 150);
				yuan.lineTo(620, 150);
				yuan.stroke();

				$.ajax({
					type: "post",
					url: "json.php",
					dataType: "json",
					async: false,
					success: function(data) {
						//				画圆
						yuan.beginPath();
						yuan.lineWidh = "2";
						yuan.strokeStyle = "crimson";
						//						获取总数值条数，下一步需要拟定为数据库前三十一条
						var numdata = data.length;
						for(var i = 0; i < numdata; i++) {
							var ve = data[i];
							var a = ve.vprice; //价钱
							//								画折线
							yuan.strokeStyle = "chocolate";
							var x = (i + 1) * 20;
							var y = 150 - a * 20;

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

			});
		</script>
	</body>

</html>

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

猜你喜欢