简单的数据可视化，并加入了animation动态效果

function dataChart(dataObj){
	var style = document.createElement('style');
	    style.type = 'text/css';
	var maxNum=Math.max.apply(null, dataObj.data);
	var ppt=parseInt(maxNum/100);
	for(var i=0;i<dataObj.data.length;i++){
		var pptOf;
		if(dataObj.data[i]==maxNum){
			pptOf=220;
		}else{
			pptOf=parseInt(dataObj.data[i]/ppt*2.2);
		}
		var dataHTML='<div class="data-item">';
			dataHTML+='<span><span class="data-year">'+dataObj.year[i]+'</span>'
			dataHTML+='<span class="data-bar" style="width:'+pptOf+'px;animation:dataBar'+i+' 2s;-webkit-animation:dataBar'+i+' 2s; "></span></span>';
			dataHTML+='<span class="data-msg"><b>'+dataObj.data[i]+'</b>条</span>';
			dataHTML+='</div>';
		
		var  rule = "@-webkit-keyframes dataBar"+i+"{0% {width:0;}100%{width:"+pptOf+"px}}"+
						"@keyframes dataBar"+i+"{0% {width:0;}100%{width:"+pptOf+"px}}";
			style.innerHTML += rule;
		document.getElementsByTagName('head')[0].appendChild(style);
		this.stylesheet = document.styleSheets[document.styleSheets.length-1];
		try {
			this.stylesheet.insertRule( rule , this.stylesheet.rules.length);
		} catch (e) {
		};
			
		$("#dataStatisticsBox-body").append(dataHTML);
	}
}

效果：

调用接口

dataChart({//数据统计接口
	year:[2013,2014,2015,2016,2017],
	data:[5542,3215,995,4551,2235]
});