用js做一个动态的条形图

思路就是给布好的静态条形动态化，需要进行动态的条形的父元素
CSS:

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background: #000;
}
ul{
    list-style: none;
}

.look07-rec{
    width: 350px;
    margin-top: 45px;
    position: absolute;
    top: 0;
    left: 20px;
}
.look07-rec li{
    text-align: left;
    line-height: 20px;
    margin-top: 20px;
    color: #fff;
}
.look-list07__rec-bg{
    text-align: right;
    position: relative;
    margin-top: 6px;
}
.look-list07__rec-bg span{
    position: absolute;
    top: 0;
    right: 0;
    font-weight: bold;
}
.rec-bg{
    width: 10px;
    height: 20px;
    background: #249979;
}

HTML:

    

        50后
        

            

            5%
        
    
    

        60后
        

            

            17%
        
    
    

        70后
        

            

            30%
        
    
    

        80后
        

            

            33%
        
    
    

        90后
        

            

            12%
        
    
    

        其他
        

            

            3%
        
    
 

JQ:

function list07(){
   var rectWidth = $('.look07-rec li').width()-40
   var data05 = [5,17,30,33,12,3];
   $('.rec-bg').css({width: 0});
   for(var ins = 0; ins < data05.length; ins++){
       var wid = data05[ins] * rectWidth/100 + 'px';
       $('.rec-bg').eq(ins).stop().animate({
           'width' : wid
       },2000);
   }
}
list07()

高度条形图：

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background: #000;
}
ul{
    list-style: none;
}
.look-list__chart{
    position: relative;
    width: 1100px;
    margin-top: 40px;
}
.look-list__chart-float{
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}
.look-list__float-l{
    width: 100px;
    float: left;
    padding-top: 30px;
}
.look-list__float-l p{
    width: 100px;
    height: 16px;
    text-align: right;
    padding-right: 10px;
    font-size: 14px;
    color: #999;
    line-height: 16px;
    margin-top: 44px;
}
.look-list__float-r{
    width: 1000px;
    float: left;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    padding-top: 30px;
}
.look-list__float-r li{
    width: 100%;
    height: 30px;
    border-top: 1px solid #333;
}
.look-list__action{
    width: 1000px;
    height: 240px;
    position: absolute;
    top: 31px;
    right: 0;
}
.look-list__action li{
    width: 45px;
    height: 240px;
    margin-left: 35px;
    float: left;
    position: relative;
}
.look-list__action div{
    position: absolute;
    bottom: 0;
}
.rec-16{
    display: inline-block;
    width: 20px;
    background: #decc85;
    left: 0;
}
.rec-17{
    display: inline-block;
    width: 20px;
    background: #db7e46;
    right: 0;
}
.hover-show{
    position: absolute;
    z-index: 300;
    background: rgba(0, 0, 0, .4);
    width: 70px;
    height: 50px;
    top: -65px;
    left: -25px;
    display: none;
}
.hover-show span{
    font-size: 14px;
    color: #decc85;
    line-height: 16px;
}
.hover-show p{
    font-size: 24px;
    color: #ddd;
    line-height: 30px;
    margin-top: 2px;
}
.rec-16:hover .hover-show{
    display: block;
}
.rec-17:hover .hover-show{
    display: block;
}
.look-list__month{
    width: 1000px;
    margin-left: 100px;
    overflow: hidden;
}
.look-list__month li{
    width: 45px;
    text-align: center;
    float: left;
    font-size: 14px;
    color: #999;
    line-height: 16px;
    margin-left: 35px;
    display: inline-block;
}

HTMl

    

        

            
8000
            
6000
            
4000
            
2000
            
0
        
        

            

            

            

            

            

            

            

            

        
    
    

        

            

            

        
        

            

            

        
        

            

            

        
        

            

            

        
        

            

            

        
        

            

            

        
        

            

            

        
        

            

            

        
        

            

            

        
        

            

            

        
        

            

            

        
        

            

            

        
    
    

        
1月
        
2月
        
3月
        
4月
        
5月
        
6月
        
7月
        
8月
        
9月
        
10月
        
11月
        
12月
    
 

JQ

function chart(){
        var data01 = [3400,2900,5500,1350,2550,5150,5300,6800,5450,3200,5275,2400];
        var data02 = [900,4500,4685,7250,8185,5380,4655,4100,6284,2308,4221,6596];
        var maxData = 8000; //数据范围0~8000
        var maxHeight = $('.look-list__action li').height();// 条形图最大高度

        $('.look-list__action').find('.rec-16').css({height:0});
        $('.look-list__action').find('.rec-17').css({height:0});
    for(var i = 0; i < 12; ++i){
            var he1 = data01[i] / maxData * maxHeight + 'px';
            $('.look-list__action').find('.rec-16').eq(i).stop().animate({
                'height' : he1
            },1000);
            var he2= data02[i] / maxData * maxHeight + 'px';
            $('.look-list__action').find('.rec-17').eq(i).stop().animate({
                'height' : he2
            },1000);
        }   
            // jq添加标签
            $('.rec-16').append("
")
            $('.rec-17').append("
")
            $('.hover-show').append("")
            $('.hover-show').append("
")
            $('.rec-16').hover(function(){
                var ins = $(this).parent('li').index();
                $(this).find('span').html('2016' + ' ' + (ins + 1) + '月');
                $(this).find('p').html(data01[ins]);
            });
            $('.rec-17').hover(function(){
                var ins = $(this).parent('li').index();
                $(this).find('span').html('2017' + ' ' + (ins + 1) + '月');
                $(this).find('p').html(data02[ins]);
            })
    }
    chart();