原生js如何实现柱状图以及原生js柱状图结合ajax循环动态数据_JavaScript_柱状图（原生JavaScript做的柱状图）（03）_ajax获取数据

最新推荐文章于 2024-03-08 15:19:01 发布

田江

最新推荐文章于 2024-03-08 15:19:01 发布

阅读量2.4k

点赞数 1

分类专栏： JavaScript从入门到精通文章标签： ajax 柱状图

本文链接：https://blog.csdn.net/jiang7701037/article/details/79156160

版权

JavaScript从入门到精通专栏收录该内容

147 篇文章 80 订阅

订阅专栏

解释：

原生JavaScript做的柱状图，数据是通过ajax从后端php代码中获取。

如果有的柱子颜色是白色，就多点几次按钮。

效果图：

代码：

前端html，css，js代码

<!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）、创建金额的span
		let spanMoneyDom = $create("span");
		spanMoneyDom.style.cssText = "text-align:center;width:"+width+"px;display:block;";
		spanMoneyDom.innerHTML = data[i].money+"万";
		bigPillarDom.appendChild(spanMoneyDom);
		//2)、创建颜色柱子的div
		let divColorDom = $create("div");
		divColorDom.style.width=width+"px";
		divColorDom.style.height=(data[i].money*percent)+"px";
		divColorDom.style.backgroundColor= getColor();
		bigPillarDom.appendChild(divColorDom);
		//3)、创建年份的p
		let 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;
?>