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

来源：互联网发布：阿里云香港节点速度编辑：程序博客网时间：2024/05/19 19:43

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]});

阅读全文

0 0