0%
0%
0%
0%
0%

核心原理：canvas画网格，css3延迟动画实现柱状图逐个出现！

实现代码： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动态柱形图</title>
	</head>
	    <style type="text/css">
	    	div,canvas{padding: 0;margin: 0;}
	    	.crilbox{width: 500px;height: 300px;background:none;margin: 0 auto;display: flex;align-items: flex-end;justify-content: space-between;}
	    	.cell{width: 50px;height: 0;background: linear-gradient(to top,#333,#999);color: #fff;text-align: center;animation: moves ease-in-out 0.5s; visibility: hidden;animation-fill-mode: forwards;}
	    	.cell:nth-of-type(1){animation-delay:0s}
	    	.cell:nth-of-type(2){animation-delay:0.5s;}
	    	.cell:nth-of-type(3){animation-delay:1s;}
	    	.cell:nth-of-type(4){animation-delay:1.5s;}
	    	.cell:nth-of-type(5){animation-delay:2s;}
	    	#crilbox{position: absolute;left: 50%;transform: translateX(-50%);top: 8px;z-index: -1;}
	    	@keyframes moves{
	    		from{height: 0;}
	    		to{visibility: visible;}
	    	}
	    </style>
	<body>
		<div class="crilbox" >
			<div class="cell" style="height: 0%;">0%</div>
			<div class="cell" style="height: 0%;">0%</div>
			<div class="cell" style="height: 0%;">0%</div>
			<div class="cell" style="height: 0%;">0%</div>
			<div class="cell" style="height: 0%;">0%</div>
		</div>
		<canvas id="crilbox" width="500" height="300"></canvas>
		
		<script type="text/javascript">
			window.onload = function(){
				var crilbox = document.getElementById("crilbox");
				var ctx = crilbox.getContext("2d");
				var datas = [ "20%","30%","15%","65%","36%"];//初始数据
				var cell = document.querySelectorAll(".cell");
				// 填充高度
				for(var d = 0;d<cell.length;d++){
					cell[d].style.height = datas[d];
					cell[d].innerHTML = datas[d];
				}
				// 绘制网格
				for (var i = 0;i<500;i = i+10) {
					ctx.moveTo(i,0);
					ctx.lineTo(i,300);
				}
				for(var j = 0;j<300;j = j+10){
					ctx.moveTo(0,j)
					ctx.lineTo(500,j);
				}
				ctx.strokeStyle = "#ddd";
           		ctx.stroke(); 
			} 
		</script>
		 
	</body>
</html>