Rumah > hujung hadapan web > tutorial js > Contoh membuat carta bar mudah dengan jQuery_jquery

Contoh membuat carta bar mudah dengan jQuery_jquery

WBOY
Lepaskan: 2016-05-16 16:17:50
asal
1684 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara mencipta histogram mudah dengan jQuery. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

Bahagian HTML:

Salin kod Kod adalah seperti berikut:
Histogram




Bahagian CSS:



Salin kod


Kod adalah seperti berikut:

/*Berikut ialah gaya histogram*/ .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-kandungan{kedudukan:mutlak;kiri:0px;atas:0;lebar:99%;tinggi:100%;}
.histogram-kandungan ul{tinggi:100%;}
.histogram-kandungan 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;/*Kawal ketinggian sel dan ketinggian peratusan, supaya peratusan dan garisan dijajarkan*/}



Bahagian Js:



Salin kod


Kod adalah seperti berikut:


$(function(){
var dataArr={
"data":[
{"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":"Little Goby","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"}
] ]
};
histogram baharu().init(dataArr.data); });

histogram(){
var controls={};
var bgColor=Array baharu("#666666","#21AA7C","#2277BB","#dc7644","#BBAA22","#AA22AA","#338800","#1099EE","#ffcc33" ,"#ED3810");
This.init=function(data,y){
setControls();
        buildHtml(data,y); }  
Fungsi 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");                                                                                                                                                                                                                                                              untuk(var a=0;a               perArr[a]=parseInt(data[a]['per']);                                                                                                                                                                                           maxNum=String(perArr.max()); Jika(maxNum.length>2){
            var x=parseInt(maxNum.substr(maxNum.length-2,1)) 1;  
               maxTotal=Math.floor(parseInt(maxNum/100))*100 x*10;           }lain{ 
                 maxTotal=Math.floor(parseInt(maxNum/10))*10 10;                                                                                                                                                                                                                                                                                                                                                                                                                              //bahagian paksi-y
Jika(y=="%"){
yStr ='
  • 100%
  • 80%
  • 60%
  • 40%
  • 0%
  • ';           }lain{ 
                var avg=maxTotal/5;  
    untuk(i=5;i>=0;i--){
                    yStr ='
  • ' purata*i '
  • '; 
                } 
            } 
             
            //柱状条部分 
            untuk(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 ='
  • '; 
            } 
             
            //背景方格部分 
            untuk(var j=0;j<5;j ){ 
                bgLineAll ='
      ' bgLineStr '
    '; 
            } 
            bgLineAll='
    ' bgLineAll '
    '; 
            contentStr='
      ' contentStr '
    '; 
            yStr='
      ' yStr '
    '; 
            controls.histogramContainer.html(bgLineAll contentStr yStr); 
            controls.histogramContainer.css("height",controls.histogramContainer.height() "px");//主要是解决IE6中的问题       
        } 

    Array.prototype.max = function(){//最大值 
     kembalikan Math.max.apply({},this)  
    }

    希望本文所述对大家的 jQuery程序设计有所帮助。

    Label berkaitan:
    sumber:php.cn
    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Tutorial Popular
    Lagi>
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan