jQuery制作简单柱状图实例

本文实例讲述了jQuery制作简单柱状图的方法。分享给大家供大家参考。具体实现方法如下：

Html部分：

代码如下:

CSS部分：

代码如下:

ottom:25px;} .histogram-bg-line{border:#999 solid;border-width:0 0px 1px 1px;border-right-color:#eee;overflow:hidden;width:99%;} .histogram-bg-line ul{overflow:hidden;border:#eee solid;border-width:1px 0 0 0;clear:both;} .histogram-bg-line li{float:left;overflow:hidden;background:#fff;} .histogram-bg-line li div{border-right:1px #eee solid;} .histogram-content{position:absolute;left:0px;top:0;width:99%;height:100%;} .histogram-content ul{height:100%;} .histogram-content li{float:left;height:100%;text-align:center;position:relative;} .histogram-Box{position:relative;display:inline-block;height:100%;width:20px;} .histogram-content li a{position:absolute;bottom:0;right:0;display:block;width:20px;font-size:0;line-height:0;} .histogram-content li .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.8 verdana,arial;} .histogram-y li{text-align:right;width:55px;padding-right:5px;color:#333;} .histogram-bg-line li div,.histogram-y li{height:30px;/*控制单元格的高度及百分比的高度，使百分数与线条对其*/}

Js部分：

代码如下:

百度","per":"10"}, {"id":2,"name":"腾讯","per":"20"}, {"id":3,"name":"新浪", {"id":4,"name":"网易","per":"44"}, {"id":5,"name":"搜狐","per":"50"},"name":"小虾虎鱼","per":"69"},"name":"人人网","per":"72"},"name":"爱奇艺","per":"88"},"name":"奇虎360","per":"92"},"name":"阿里巴巴","per":"15"},"per":"10"} ] }; new histogram().init(dataArr.data); });

function histogram(){
var controls={};
var bgColor=new Array("#666666","#21AA7C","#2277BB","#dc7644","#BBAA22","#AA22AA","#338800","#1099EE","#ffcc33","#ED3810");
this.init=function(data,y){
setControls();
buildHtml(data,y);
}
function setControls(){
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");
}
function buildHtml(data,y){
var len=data.length,perArr=new Array(),maxnum,maxTotal,yStr='';
var contentStr='',bgLinestr='',bgLineAll='';
var widthPer=Math.floor(100/len);
minWidth=len*21+60;
controls.histogramContainer.css("min-width",minWidth+"px");

for(var a=0;a<len;a++){
perArr[a]=parseInt(data[a]['per']);
}
maxNum=String(perArr.max());
if(maxNum.length>2){
var x=parseInt(maxnum.substr(maxnum.length-2,1))+1;
maxTotal=Math.floor(parseInt(maxnum/100))100+x10;
}else{
maxTotal=Math.floor(parseInt(maxnum/10))*10+10;
}

//y轴部分
if(y=="%"){
yStr+='

100%

80%

60%

40%

20%

0%

';
}else{
var avg=maxTotal/5;
for(i=5;i>=0;i--){
yStr+='

'+avg*i+'

';
}
}

//柱状条部分
for(var i=0;i<len;i++){
var per=Math.floor(parseInt(data[i]['per'])/maxTotal*100);
var n=Math.floor(parseInt(per)/10);
contentStr+='<li style="width:'+widthPer+'%">';
contentStr+='<span class="histogram-Box"><a style="height:'+per+'%'+';background:'+bgColor[n]+';" title="'+data[i]['per']+'"><span class="histogram-name">'+data[i]['name']+'';
contentStr+='';
bgLinestr+='<li style="width:'+widthPer+'%;">

';
}

//背景方格部分
for(var j=0;j<5;j++){
bgLineAll+='

'+bgLinestr+'

';
}
bgLineAll='<div class="histogram-bg-line">'+bgLineAll+'

';
contentStr='<div class="histogram-content">

'+contentStr+'

';
yStr='<div class="histogram-y">

'+yStr+'