前段时间使用HTML+CSS制作了一个柱状图，今天将Javascript版的也分享一下，没用做成插件的形式，只需要调用一个函数即可，功能比较简单，使用起来也算方便，只需要将json数据传入给该函数即可，具体使用方法看完代码便知道，

代码如下：

HTML：

/p>

Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

xmlns="http://www.w3.org/1999/xhtml">

柱状图 - ab蓝学网

http://www.ablanxue.com

content="text/html; charset=utf-8" />

rel="stylesheet" />

CSS:

.histogram-container{position:relative;margin-left:60px;margin-top:10px;margin-bottom: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;}

Javascript(jQuery)：

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

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+x*10;

}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

var

per=Math.floor(parseInt(data[i]['per'])/maxTotal*100);

var

n=Math.floor(parseInt(per)/10);

contentStr+='

style="width:'+widthPer+'%">';

contentStr+='

class="histogram-box">

style="height:'+per+'%'+';background:'+bgColor[n]+';"

title="'+data[i]['per']+'">

class="histogram-name">'+data[i]['name']+'

';

contentStr+='

';

bgLineStr+='

style="width:'+widthPer+'%;">

';

}

//背景方格部分

for(var j=0;j<5;j++){

bgLineAll+='

• '+bgLineStr+'

';

}

bgLineAll='

';

contentStr='

';

yStr='

';

controls.histogramContainer.html(bgLineAll+contentStr+yStr);

//主要是解决IE6中的问题

controls.histogramContainer.css("height",

controls.histogramContainer.height()+"px");

}

}

Array.prototype.max = function(){//最大值

return Math.max.apply({},this)

}

json数据格式及调用方法：

var dataArr={

"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"}

]

};

new histogram().init(dataArr.data);

init含有两个参数，第一个为json数据，第二个可选。如果y轴需要以百分比的形式显示在将第二个参数设为"%"即可。

BAIDU_CLB_fillSlot("868061");

如果觉得《jQuery制作简单的柱状图(数据统计报表)》不错，请把本站告诉您身边的朋友！