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));
?>