canvas(柱状图)

最新推荐文章于 2023-08-28 11:50:23 发布

spfLinux

最新推荐文章于 2023-08-28 11:50:23 发布

阅读量409

点赞数

分类专栏： js 文章标签： JS canvas

本文链接：https://blog.csdn.net/spflinux/article/details/78816319

版权

js 专栏收录该内容

137 篇文章 3 订阅

订阅专栏

html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		canvas{
			background: #ddd;
		}
	</style>
</head>
<body>
	<h2>统计图</h2>
	<canvas id="c2" width="500" height="400">
		您的浏览器版本太低，请升级！
	</canvas>
	
	<script src="js/jquery.min.js"></script>
	<script>
		//柱形图
		var c2=document.getElementById('c2');
		var ctx=c2.getContext('2d');
		//画第一个柱形

		$.get('php/1.php')
		.then(data=>{
			console.log(data);
			data=JSON.parse(data);
			var x=50;
			for(var item of data){
				var str=item.label;
				var value=item.value;
				ctx.strokeRect(x/*开始x坐标*/,350-parseInt(item.value)/*开始y坐标*/,50/*宽度*/,parseInt(item.value)/*高度*/);
				ctx.fillText(str,x,350+20);
				ctx.fillText(value,x,350-parseInt(item.value)-10);
				x+=80;

			}
		});
	</script>
</body>
</html>

php:

<?php 

	require_once('init.php');

	$sql="SELECT * FROM can_data";
	$result=mysqli_query($conn,$sql);

	echo json_encode(mysqli_fetch_all($result,1));
?>

优惠劵

spfLinux

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas(柱状图)

html: Document canvas{ background: #ddd; } 统计图您的浏览器版本太低，请升级！ //柱形图 var c2=document.getElementById('c2'); var ctx=c2.getContext('2d'); //画第一个柱形 $.get('php/1
复制链接

扫一扫