原生js如何?柱狀圖以及原生js柱狀圖結合ajax迴圈動態資料_JavaScript_柱狀圖（原生JavaScript做的柱狀圖）（03）_ajax擷取資料，
解釋：
原生JavaScript做的柱狀圖，資料是通過ajax從後端php代碼中擷取。
如果有的柱子顏色是白色，就多點幾次按鈕。
：<!doctype html><html><head><title></title><meta charset = "utf-8"/></head><style type="text/css">/*整個顯示柱狀圖的地區的高度的是500px;每個柱子的寬是50px;每個柱子的間隔是：50px；第一個柱子的left是100px；*/*{margin:0px;padding:0px;}#box{width:800px;height:500px;border-bottom:solid 2px black;position:relative;}</style><body><input id="btn" type="button" value="顯示銷售資料" /><div id="box"></div></body></html><script type="text/javascript">//編寫函數獲得隨機的顏色字串（#20cd4f）function getColor(){//分別隨機r g b的值var r = parseInt(Math.random()*256);var g = parseInt(Math.random()*256);var b = parseInt(Math.random()*256);return "#"+r.toString(16)+g.toString(16)+b.toString(16);}//ajax請求的封裝//參數：// 請求方式: 字串類型// url: 字串類型// 是否非同步：boolean類型// 請求參數：字串類型// 回呼函數//傳回值：無function ajax1708(method,url,paramStr,isAsync,callback){//1、建立對象let xhr = new XMLHttpRequest();//2、佈建要求參數let urlStr = url;if(method.toLowerCase()=="get" && paramStr!=""){urlStr+="?"+paramStr;}xhr.open(method,urlStr,isAsync);//3、設定回呼函數xhr.onreadystatechange = function(){if(xhr.readyState==4 && xhr.status==200){if(callback!=null){callback(xhr.responseText);}}}//4、發送請求if(method.toLowerCase()=="post"){xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");xhr.send(paramStr);}else{xhr.send();}}function getData(){ajax1708("get","getSaleMoney.php","",true,function(str){let data = JSON.parse(str);showTotal(data);});}//計算最大金額function getMaxMoney(data){let maxMoney = data[0].money;for(let i in data){if(data[i].money>maxMoney){maxMoney = data[i].money;}}return maxMoney;}function showTotal(data){//1、明確最大高度和最大金額let maxWidth = 800;let maxHeight = 450;let maxMoney = getMaxMoney(data);//2、計算比例(一萬元多少像素)percent = maxHeight/maxMoney;//3、柱子之間的間隔和柱子的寬度(假定柱子的間隔和寬度是一樣的)let space = maxWidth/(data.length*2+1);let width = space;//迴圈所有的資料產生柱狀圖for(let i=0;i<data.length;i++){//1、建立大div（包著金額，顏色柱子，年份）let bigPillarDom = document.createElement("div");let left = (i+1)*space+i*width;bigPillarDom.style.cssText="position:absolute;left:"+left+"px;bottom:-20px;width:50px;";$("box").appendChild(bigPillarDom);//2、建立年份，顏色柱子，金額對應dom元素。//1）、建立金額的spanlet spanMoneyDom = $create("span");spanMoneyDom.style.cssText = "text-align:center;width:"+width+"px;display:block;";spanMoneyDom.innerHTML = data[i].money+"萬";bigPillarDom.appendChild(spanMoneyDom);//2)、建立顏色柱子的divlet divColorDom = $create("div");divColorDom.style.width=width+"px";divColorDom.style.height=(data[i].money*percent)+"px";divColorDom.style.backgroundColor= getColor();bigPillarDom.appendChild(divColorDom);//3)、建立年份的plet pYearDom = $create("p");pYearDom.innerHTML = data[i].year;pYearDom.style.cssText ="height:20px;text-align:center;";bigPillarDom.appendChild(pYearDom);}}function $(id){return document.getElementById(id);}function $create(tagName){return document.createElement(tagName);}window.onload = function(){$("btn").onclick = getData;}</script>php代碼：getSaleMoney.php
<?php$str='[{"year":"2011","money":200},{"year":"2012","money":600},{"year":"2013","money":580},{"year":"2014","money":300},{"year":"2015","money":800},{"year":"2016","money":1000},{"year":"2017","money":1500},{"year":"2018","money":2500},{"year":"2019","money":3500}]';echo $str;?>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
