jQuery製作簡單長條圖實例_jquery

本文實例講述了jQuery製作簡單長條圖的方法。分享給大家供大家參考。具體實作方法如下：

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;/*控制單元格的高度及百分比的高度，使百分數與線條對其*/}

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","#ffcc33333333" ,"#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 ='

'; 
            contentStr =''數據[i]['名稱']'' ; 
            contentStr ='

'; 
            bgLineStr ='

'; 
        } 
         
        // 背景方格部分
        for(var j=0;j             bgLineAll = '

' bgLineStr '

'; 
        } 
        bgLineAll='

' bgLineAll '

'; 
        contentStr='

' contentStr '

'; 
        yStr='

' yStr '

'; 
        control.histogramContainer.html(bgLineAll contentStr yStr); 
        controls.histogramContainer.css("height",controls.histogramContainer.height() "px");//主要是解決IE6中的問題       
    } 
} 
Array.prototype.max = function(){//頂部
 return Math.max.apply({},this)  
}

希望本文對大家介紹的 jQuery 程式設計有幫助。