小虾虎鱼

小虾虎鱼

使用jQuery制作简单的柱状图

作者 禾惠 发表于 2012/11/18,最后修改于 2012/11/18

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

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>柱状图 - 小虾虎鱼</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css.css" type="text/css" rel="stylesheet" />
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="histogram.js" type="text/javascript"></script>
</head>
<body>
<div class="histogram-container" id="histogram-container"></div>
</body>
</html>


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<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+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{
            var avg=maxTotal/5;
            for(i=5;i>=0;i--){
                yStr+='<li>'+avg*i+'</li>';
            }
        }
                       
        //柱状条部分
        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']+'"></a></span><span class="histogram-name">'+data[i]['name']+'</span>';
            contentStr+='</li>';
            bgLineStr+='<li style="width:'+widthPer+'%;"><div></div></li>';
        }
                       
        //背景方格部分
        for(var j=0;j<5;j++){
            bgLineAll+='<ul>'+bgLineStr+'</ul>';
        }
        bgLineAll='<div class="histogram-bg-line">'+bgLineAll+'</div>';
        contentStr='<div class="histogram-content"><ul>'+contentStr+'</ul></div>';
        yStr='<div class="histogram-y"><ul>'+yStr+'</ul></div>';
        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轴需要以百分比的形式显示在将第二个参数设为"%"即可。

代码实例:下载