js + css 实现一个简单的柱状图_css柱状图颜色搭配-优快云博客

本文链接：https://blog.youkuaiyun.com/longtian1213/article/details/9034833

本文介绍了一种不依赖第三方插件的手工绘制简单柱状图的方法。通过JavaScript和HTML实现了基本的数据展示功能，适合编程初学者练习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做项目的时候，经常会画各种统计图，柱状图就是其中之一，以前一直都是用第三方插件来实现的，突然自己想能不能用所学的知识做一个简单的玩玩，嘿嘿，还不难，虽然简陋，但也基本实现啦！常动手，对提高自己编程能力有好处！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>
	<head>
		<meta charset="utf-8" />
		<title>柱状图</title>
		<script type="text/javascript" src="Bar.js"></script>
	</head>
	<body>
		<div id="bar"> 
			
		</div>
	</body>
	<script type="text/javascript">
		var bar = new Bar("bar");
		bar.setData([51,{1:14},{2:37}]);
	</script>
</html>

(function(){
	var node = null;//要将柱状图保存在那个节点里
	/**
	 *定义一个柱状图对象 
	 */
	Bar = function(id){
		node = $(id);
		node.style.height = "200px";
		node.style.verticalAlign = "bottom";
	}
	/**
	 *设置数据 
	 */
	Bar.prototype.setData = function(obj){
		for(var i = 1 ; i < obj.length ; i ++){
			for(var j in obj[i]){
				if(node != null){
					var div = createBar(obj[0],j,obj[i][j]);
					node.appendChild(div);
				}
			}
		}
	}
	var $ = function(id){
		if(typeof id == 'string'){
			return document.getElementById(id);
		}
	}
	/**
	 *创建柱状图DIV 
 	 * @param {Object} count
 	 * @param {Object} barName
 	 * @param {Object} barCount
	 */
	var createBar = function(count,barName,barCount){
		var outDiv = document.createElement("div");
		//创建一个span，用于保存柱状图的名字
		var barNameSpan = document.createElement("span");
		barNameSpan.innerHTML = barName;
		//柱状图的宽度
		outDiv.style.width = "10px";
		//柱状图左右各间隔5个像素
		outDiv.style.marginLeft = "5px";
		outDiv.style.marginRight = "5px";
		if(document.all){
			outDiv.style.styleFloat = "left";//IE设置浮动
		}else{
			outDiv.style.cssFloat = "left";//其他浏览器设置浮动			
		}
		//创建一个div，用于实现柱状图
		var barDiv = document.createElement("div");
		var height = 0
		if(count != 0){
			height = ((barCount/count) * 100).toFixed(2);//计算柱状图的高度，结果四舍五入保留两位小数		
		}
		//创建一个span，用于保存柱状图所在的百分比
		var preSpan =document.createElement("span");
		preSpan.innerHTML = height + "%";	
		preSpan.style.display = "block";
		preSpan.style.width = "10px";
		
		barDiv.style.height = height + "px";
		barDiv.style.backgroundColor = "red";//柱状图的背景颜色
		
		//设置柱状图底对齐
		outDiv.style.marginTop = (node.offsetHeight - height) + "px";
		
		outDiv.appendChild(preSpan);
		outDiv.appendChild(barDiv);
		outDiv.appendChild(barNameSpan);
		return outDiv;
	}
})();