当前路径: 星河码客 » 插件特效 » jquery动态3d柱状图条形图

jquery动态3d柱状图条形图

var values = [250,450,340,290,200,50,45,85,95,120];drawChart(values,"#chart",10) // You can adjust the margin between each bar by changing 10 to whatever you likefunction drawChart(data,selector,padding){ var max = Math.max.apply(Math, data); var chart = document.querySelector(selector); var barwidth = ((chart.offsetWidth-(values.length-1)*padding-(data.length)*10)/data.length); var sum = data.reduce(function(pv, cv) { return pv + cv; }, 0); var left = 0; for (var i in data){ var newbar = document.Element('div'); newbar.setAttribute("class", "bar"); newbar.style.width=barwidth+"px"; newbar.style.height=((data[i]/max)*100)+"%"; newbar.style.left=left+"px"; chart.appendChild(newbar); left += (barwidth+padding+10); }}

jquery动态3d柱状图条形图

在线演示        积分下载        6毛下载        砍两刀下载       

文件目录······
暂无数据
 猜你喜欢 更多»
 工具推荐 更多»