<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ text-align: center; } canvas{ background: #ddd; } </style> </head> <body> <canvas id="canvas" width="800" height="700"></canvas> <script src="jquery-3.2.1.js"></script> <script> //获取画笔工具 //创建变量保存画布宽度高度边界距离 //绘制统计图的轮廓 //发送ajax请求数据 //返回数据，动态绘制图形 var elem = document.getElementById("canvas"); var canvas = elem.getContext("2d"); var w= 800,//画布宽度 h = 700,//画布高度 pd = 50 ;//统计图的内容到画布边界的距离 canvas.strokeRect(pd,pd,w-2*pd,h-2*pd); $.ajax({ type:"GET", url:"saledata.php", success:function(data){ console.log("成功接收数据"); console.log(data); //数据个数 //每个柱子/间距宽度 var count = data.length; var barWidth = (w-2*pd)/(2*count+1); for(var i = 0;i<count;i++){ var d = data[i];//第i月份的数量 //柱子的宽度 var bw = barWidth; //柱子的高度 var bh = d.value; //柱子的x var bx = pd +(2*i+1)*barWidth; //柱子的y var by = h-pd-bh; //绘制矩形 //canvas.strokeRect(bx,by,bw,bh); canvas.fillStyle = rColor(); canvas.fillRect(bx,by,bw,bh); } }, error:function(){ alert("网络出现故障，请检查!"); } }); function rColor(){ var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math.floor(Math.random()*256); return `rgb(${r},${g},${b})`; } </script> </body> </html>
<?php header("Content-Type:application/json;charset=utf-8"); $rows = []; /* $rows=[ ["月份"=>"一月","value"=>280], ["月份"=>"二月","value"=>270], ["月份"=>"三月","value"=>380], ["月份"=>"四月","value"=>280], ["月份"=>"五月","value"=>280], ["月份"=>"六月","value"=>210], ["月份"=>"七月","value"=>180], ["月份"=>"八月","value"=>280], ["月份"=>"九月","value"=>200], ["月份"=>"十月","value"=>280], ["月份"=>"十一月","value"=>300], ["月份"=>"十二月","value"=>300] ]; */ $rows[]=["月份"=>"1月","value"=>160]; $rows[]=["月份"=>"2月","value"=>290]; $rows[]=["月份"=>"3月","value"=>220]; $rows[]=["月份"=>"4月","value"=>100]; $rows[]=["月份"=>"5月","value"=>190]; $rows[]=["月份"=>"6月","value"=>170]; $rows[]=["月份"=>"7月","value"=>270]; $rows[]=["月份"=>"8月","value"=>120]; $rows[]=["月份"=>"9月","value"=>250]; $rows[]=["月份"=>"10月","value"=>240]; $rows[]=["月份"=>"11月","value"=>230]; $rows[]=["月份"=>"12月","value"=>210]; echo json_encode($rows); ?>
***********记得添加jquery-3.2.1.js哦