欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery制作简单柱状图实例教程

程序员文章站 2022-06-08 10:58:46
本文实例讲述了jquery制作简单柱状图的方法。分享给大家供大家参考。具体实现方法如下: html部分: 代码如下:  

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

html部分:

代码如下:

<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> 
<p class="histogram-container" id="histogram-container"></p> 
</body>

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 p{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 p,.histogram-y li{height:30px;/*控制单元格的高度及百分比的高度,使百分数与线条对其*/}

js部分:

代码如下:


$(function(){ 
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); 
}); 
 
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("p.histogram-bg-line"); 
        controls.histogramcontentul=controls.histogramcontainer.children("p.histogram-content"); 
        controls.histogramy=controls.histogramcontainer.children("p.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+'%;"><p></p></li>'; 
        } 
         
        //背景方格部分 
        for(var j=0;j<5;j++){ 
            bglineall+='<ul>'+bglinestr+'</ul>'; 
        } 
        bglineall='<p class="histogram-bg-line">'+bglineall+'</p>'; 
        contentstr='<p class="histogram-content"><ul>'+contentstr+'</ul></p>'; 
        ystr='<p class="histogram-y"><ul>'+ystr+'</ul></p>'; 
        controls.histogramcontainer.html(bglineall+contentstr+ystr); 
        controls.histogramcontainer.css("height",controls.histogramcontainer.height()+"px");//主要是解决ie6中的问题       
    } 

array.prototype.max = function(){//最大值 
 return math.max.apply({},this)  
}