jQuery制作简单柱状图实例
本文实例讲述了jQuery制作简单柱状图的方法。分享给大家供大家参考。具体实现方法如下:
Html部分:
<head> <title>柱状图</title> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <linkhref="css.css"type="text/css"rel="stylesheet"/> <scriptsrc="jquery-1.8.2.min.js"type="text/javascript"></script> <scriptsrc="histogram.js"type="text/javascript"></script> </head> <body> <divclass="histogram-container"id="histogram-container"></div> </body>
CSS部分:
/*以下为柱状图样式*/ .histogram-container{position:relative;margin-left:60px;margin-top:10px;margin-bottom:25px;} .histogram-bg-line{border:#999solid;border-width:00px1px1px;border-right-color:#eee;overflow:hidden;width:99%;} .histogram-bg-lineul{overflow:hidden;border:#eeesolid;border-width:1px000;clear:both;} .histogram-bg-lineli{float:left;overflow:hidden;background:#fff;} .histogram-bg-linelidiv{border-right:1px#eeesolid;} .histogram-content{position:absolute;left:0px;top:0;width:99%;height:100%;} .histogram-contentul{height:100%;} .histogram-contentli{float:left;height:100%;text-align:center;position:relative;} .histogram-box{position:relative;display:inline-block;height:100%;width:20px;} .histogram-contentlia{position:absolute;bottom:0;right:0;display:block;width:20px;font-size:0;line-height:0;} .histogram-contentli.histogram-name{position:absolute;bottom:-20px;left:0px;white-space:nowrap;display:inline-block;width:100%;font-size:12px;overflow:hidden;} .histogram-y{position:absolute;left:-60px;top:-10px;font:12px/1.8verdana,arial;} .histogram-yli{text-align:right;width:55px;padding-right:5px;color:#333;} .histogram-bg-linelidiv,.histogram-yli{height:30px;/*控制单元格的高度及百分比的高度,使百分数与线条对其*/}
Js部分:
$(function(){ vardataArr={ "data":[ {"id":1,"name":"百度","per":"10"}, {"id":2,"name":"腾讯","per":"20"}, {"id":3,"name":"新浪","per":"10"}, {"id":4,"name":"网易","per":"44"}, {"id":5,"name":"搜狐","per":"50"}, {"id":5,"name":"小虾虎鱼","per":"69"}, {"id":5,"name":"人人网","per":"72"}, {"id":5,"name":"爱奇艺","per":"88"}, {"id":5,"name":"奇虎360","per":"92"}, {"id":5,"name":"阿里巴巴","per":"15"}, {"id":5,"name":"阿里巴巴","per":"10"} ] }; newhistogram().init(dataArr.data); }); functionhistogram(){ varcontrols={}; varbgColor=newArray("#666666","#21AA7C","#2277BB","#dc7644","#BBAA22","#AA22AA","#338800","#1099EE","#ffcc33","#ED3810"); this.init=function(data,y){ setControls(); buildHtml(data,y); } functionsetControls(){ controls.histogramContainer=$("#histogram-container"); controls.histogramBgLineUL=controls.histogramContainer.children("div.histogram-bg-line"); controls.histogramContentUL=controls.histogramContainer.children("div.histogram-content"); controls.histogramY=controls.histogramContainer.children("div.histogram-y"); } functionbuildHtml(data,y){ varlen=data.length,perArr=newArray(),maxNum,maxTotal,yStr=''; varcontentStr='',bgLineStr='',bgLineAll=''; varwidthPer=Math.floor(100/len); minWidth=len*21+60; controls.histogramContainer.css("min-width",minWidth+"px"); for(vara=0;a<len;a++){ perArr[a]=parseInt(data[a]['per']); } maxNum=String(perArr.max()); if(maxNum.length>2){ varx=parseInt(maxNum.substr(maxNum.length-2,1))+1; maxTotal=Math.floor(parseInt(maxNum/100))*100+x*10; }else{ maxTotal=Math.floor(parseInt(maxNum/10))*10+10; } //y轴部分 if(y=="%"){ yStr+='<li>100%</li><li>80%</li><li>60%</li><li>40%</li><li>20%</li><li>0%</li>'; }else{ varavg=maxTotal/5; for(i=5;i>=0;i--){ yStr+='<li>'+avg*i+'</li>'; } } //柱状条部分 for(vari=0;i<len;i++){ varper=Math.floor(parseInt(data[i]['per'])/maxTotal*100); varn=Math.floor(parseInt(per)/10); contentStr+='<listyle="width:'+widthPer+'%">'; contentStr+='<spanclass="histogram-box"><astyle="height:'+per+'%'+';background:'+bgColor[n]+';"title="'+data[i]['per']+'"></a></span><spanclass="histogram-name">'+data[i]['name']+'</span>'; contentStr+='</li>'; bgLineStr+='<listyle="width:'+widthPer+'%;"><div></div></li>'; } //背景方格部分 for(varj=0;j<5;j++){ bgLineAll+='<ul>'+bgLineStr+'</ul>'; } bgLineAll='<divclass="histogram-bg-line">'+bgLineAll+'</div>'; contentStr='<divclass="histogram-content"><ul>'+contentStr+'</ul></div>'; yStr='<divclass="histogram-y"><ul>'+yStr+'</ul></div>'; controls.histogramContainer.html(bgLineAll+contentStr+yStr); controls.histogramContainer.css("height",controls.histogramContainer.height()+"px");//主要是解决IE6中的问题 } } Array.prototype.max=function(){//最大值 returnMath.max.apply({},this) }
希望本文所述对大家的jQuery程序设计有所帮助。