Beispiel für die Erstellung eines einfachen Balkendiagramms mit jQuery_jquery

Das Beispiel in diesem Artikel beschreibt, wie man mit jQuery ein einfaches Histogramm erstellt. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

Html-Teil:

Code kopieren Der Code lautet wie folgt:

CSS-Teil:

Code kopieren

Der Code lautet wie folgt:
/*Das Folgende ist der Histogrammstil*/

.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;/*Steuern Sie die Höhe der Zelle und die Höhe des Prozentsatzes, sodass der Prozentsatz und die Linie ausgerichtet sind*/}



Js-Teil:

Code kopieren

Der Code lautet wie folgt:

$(function(){
var dataArr={
"Daten":[
{"id":1,"name": "Baidu", "per": "10"},
{"id":2,"name": "Tencent", "per": "20"},
{"id":3,"name":Sina,per:10"},
{"id":4,"name": "NetEase", "per": "44"},
{"id":5,"name":"Sohu", "per": "50"},
              {"id":5,"name":Kleiner Grundel,"per":69"},
{"id":5,"name": "人人网", "per": "72"},
{"id":5,"name": "iQiyi", "per": 88"},
{"id":5,"name": "Qihoo 360", "per": "92"},
{"id":5,"name": "Alibaba", "per": "15"},
{"id":5,"name": "Alibaba", "per": "10"}
] ]
};
neues Histogramm().init(dataArr.data); });

Funktionshistogramm(){
var control={};
var bgColor=new Array("#666666",#21AA7C,#2277BB,#dc7644,#BBAA22,#AA22AA,#338800,#1099EE,#ffcc33" ,"#ED3810"); This.init=function(data,y){
setControls();
        buildHtml(data,y); }  
Funktion 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"); }  
Funktion 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;           }sonst{ 
                 maxTotal=Math.floor(parseInt(maxNum/10))*10 10;                                                                                                                                                                                                    //y-Achsenteil
If(y=="%"){
yStr ='

100%

80%

60%

40%

0%

';           }sonst{ 
            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 ='' data[i]['name'] ''; 
            contentStr ='

'; 
            bgLineStr ='

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

' bgLineStr '

'; 
        } 
        bgLineAll='

' bgLineAll '

'; 
        contentStr='

' contentStr '

'; 
        yStr='

' yStr '

'; 
        Kontrollen.histogramContainer.html(bgLineAll contentStr yStr); 
        Controls.histogramContainer.css("height",controls.histogramContainer.height() "px");//主要是解决IE6中的问题       
    } 
} 
Array.prototype.max = function(){//最大值 
 return Math.max.apply({},this)  
}

Sie haben die jQuery-Version mit jQuery erstellt.