<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ text-align: center; } svg{ background: #ddd; } </style> </head> <body> <svg id="s3" width="500" height="400"></svg> <script src="data/jquery-3.2.1.js"></script> <script> $.ajax({ type:"GET", url:"data/07_saledata.php", success:function(data){ console.log(data); for(var i = 0;i<data.length;i++){ var dept = data[i]; var rect = document.createElementNS("http://www.w3.org/2000/svg",'rect'); rect.setAttribute("width",50); rect.setAttribute("height",dept.value); rect.setAttribute("x",100*i); rect.setAttribute('fill', rc(0,256));//填充色 rect.setAttribute("y",400-dept.value); s3.appendChild(rect); } }, error:function(){ alert("您的网络出现故障，请检查!"); } }) function rn(min, max) { return Math.floor(Math.random() * (max - min) + min); } //random color，返回指定范围内的随机颜色 function rc(min, max) { var r = rn(min, max); var g = rn(min, max); var b = rn(min, max); 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]; echo json_encode($rows); ?>
***********记得添加jquery-3.2.1.js哦