jQuery制作简单柱状图实例

2019-07-15 11:16:51 来源：易采站长站作者：王冬梅

        //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+'%;"><div></div></li>';
        }

        //背景方格部分
        for(var j=0;j<5;j++){
            bgLineAll+='<ul>'+bgLineStr+'</ul>';
        }
        bgLineAll='<div class="histogram-bg-line">'+bgLineAll+'</div>';
        contentStr='<div class="histogram-content"><ul>'+contentStr+'</ul></div>';
        yStr='<div class="histogram-y"><ul>'+yStr+'</ul></div>';

3/4 首页上一页 1 2 3 4 下一页尾页