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程序设计有所帮助。