jQuery制作简单柱状图实例

2020-05-23 06:01:03易采站长站整理

         
        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>’;