慕课网实战—《用组件方式开发 Web App全站》笔记四-柱状图组件开发

本文链接：https://blog.csdn.net/Lovejulyer/article/details/51919166

运用HTML5、CSS3、JS流行技术，采用组件式开发模式，开发Web App全站！技术大牛带你统统拿下不同类型的HTML5动态数据报告！
《用组件方式开发 Web App全站》

柱图开发思路

这里写图片描述

水平柱图开发（HTML的DOM搭建）

这里写图片描述

水平柱图开发（CSS样式编写）

/* 柱状组件样式 */
.h5_component_bar{
}

.h5_component_bar .line{
    height: 15px;
    font-size: 12px;
    line-height: 15px;
    margin-bottom: 15px;
}

.h5_component_bar .name{
    width: 60px;
    float: left;
    color: #000;
    text-align: center;
}

.h5_component_bar .rate{
    height: 15px;
    margin-left: 5px;
    float: left;
    position: relative;
}
.h5_component_bar .rate .bg{
    background-color: #99c0ff;
    width: 0%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 3px;
}

.h5_component_bar .per{
    width: 20px;
    color: #99c0ff;
    margin-left: 5px;
    float: left;
    -webkit-opacity:0;
}

.h5_component_bar_load .rate .bg{
    -webkit-transition:all 1s .5s;
    width: 100%;
}


.h5_component_bar_leave .rate .bg{
    width: 0%;
}


.h5_component_bar_load .per{
    -webkit-transition:all 1s 1.5s;
    -webkit-opacity:1;
}
.h5_component_bar_leave .per{
    -webkit-opacity:0;
}

水平柱图开发（生长动画制作）

JavaScript

/* 柱图组件对象 */

var H5ComponentBar =function ( name, cfg ) {
  var component =  new H5ComponentBase( name ,cfg );

  $.each(cfg.data,function(idx,item){

    var line = $('<div class="line">');
    var name = $('<div class="name">');
    var rate = $('<div class="rate">');
    var per = $('<div class="per">');

    var width = item[1]*100 + '%';

    var  bgStyle = '';
    if( item[2] ){
      bgStyle = 'style="background-color:'+item[2]+'"';
    }

    rate.html( '<div class="bg" '+bgStyle+'></div>' );

    rate.css('width',width);

    name.text( item[0]);

    per.text(width);

    line.append( name ).append( rate ).append( per );

    component.append(line);
  });

  return component;
}

HTML

    <body>
        <!-- 用于开发测试 H5ComponentBar 对象（柱图组件） -->
        <div class="iphone">

        </div>

        <script type="text/javascript">
            var cfg = {
                type : 'bar',

                width : 530,
                height : 600,
                data : [
                    ['JavaScript',.4,'#ff7676'],
                    ['HTML/CSS',.2],
                    ['CSS3',.3],
                    ['HTML5',.1],
                    ['jQuery',.2],
                    ['Bootstrap',.05],
                    ['AngularJs',.09]
                ],
                css : {
                    top:100,
                    opacity:0
                },
                animateIn:{
                    opacity:1,
                    top:200,
                },
                animateOut:{
                    opacity:0,
                    top:100,
                },
                center:true,
            }
            var h5 = new H5ComponentBar('myBar',cfg);
            $('.iphone').append(h5);
            var leave = true;
            $('body').click(function(){
                leave = !leave;
                $('.h5_component').trigger( leave ? 'onLeave' : 'onLoad');

            });

        </script>

    </body>

实现效果：

这里写图片描述

拓展：垂直柱图实现

这里写图片描述

思路分析：

这里写图片描述

HTML

<script type="text/javascript" src="../js/lib/jquery.js"></script>
    <script type="text/javascript" src="../js/H5ComponentBase.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/H5ComponentBase.css">

    <!-- 任务一：(1)引入需要继承的水平柱图对象js文件 -->
    <script type="text/javascript" src="../js/H5ComponentBar.js"></script>

    <!-- 引入柱图-垂直的资源 -->
    <script type="text/javascript" src="../js/H5ComponentBar_v.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/H5ComponentBar_v.css">

    <body>
        <!-- 用于开发测试 H5ComponentBar_v 对象（垂直柱图组件） -->
        <div class="iphone">

        </div>

        <script type="text/javascript">

            var cfg = {

                // 任务一： （2）修正配置文件的组件类型(type)定义为 ? （注意：这个类型名称的定义关系到样式设置）
                type : 'bar_v',

                width : 530,
                height : 400,
                data:[
                    ['Js' , .4  ,'#ff7676'],
                    ['CSS3' , .1 ],
                    ['HTML5' , .2  ],
                    ['PHP' , .05  ],
                    ['jQuery' , .35 ]
                ],
                css : {
                    top:100,
                    opacity:0
                },
                animateIn:{
                    opacity:1,
                    top:200,
                },
                animateOut:{
                    opacity:0,
                    top:100,
                },
                center : true,
            }

            var h5 = new H5ComponentBar_v( 'myBarComponent', cfg );
            $('.iphone').append(h5);


            var leave = true;
            $('body').click(function (){
                leave = !leave;
                $('.h5_component').trigger( leave ? 'onLeave' : 'onLoad' )
            }).click();

        </script>

    </body>

/* 垂直柱状组件样式 */
.h5_component_bar_v{
}


.h5_component_bar_v .line{
    float: left;
    height: 100%;
    font-size: 12px;
    position: relative;

}

.h5_component_bar_v .name{
    width: 100%;
    position: absolute;
    left: 0;
    height: 20px;
    line-height: 20px;
    bottom: -20px;
    text-align: center;
}

.h5_component_bar_v .rate{
    height: 100%;
    width: 15px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -8px;
}
.h5_component_bar_v .rate .bg{
    background-color: #99c0ff;
    width: 100%;
    height: 0%;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 3px;
}

.h5_component_bar_v .per{
    width: 100%;
    position: absolute;
    left: 0;
    /*任务三：(1)修正 百分比数字 的位置，使其保持在 .bg 的顶端*/
    top: -20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #99c0ff;
    -webkit-opacity:0;
}

.h5_component_bar_v_load .rate .bg{
    -webkit-transition:all 1s .5s;
    height: 100%;
}


.h5_component_bar_v_leave .rate .bg{
    height: 0%;
}


.h5_component_bar_v_load .per{
    -webkit-transition:all 1s 1.5s;
    -webkit-opacity:1;
}
.h5_component_bar_v_leave .per{
    -webkit-opacity:0;
}

JavaScript

/* 垂直柱图组件对象 */

var H5ComponentBar_v =function ( name, cfg ) {

  //  任务二：(1) 完成 component 的初始化定义（补全 var component = ???）
  var component =  new H5ComponentBar( name ,cfg );

  //  任务二：(2) 完成 width 每个柱图中项目的宽度计算。（补全 var width = ???）
  var width = ( 100 / cfg.data.length ) >> 0 ;
  component.find('.line').width( width + '%');

  $.each( component.find('.rate') ,function(){
      var w = $(this).css('width');
      //  任务二：(3) 把进度区的宽度重设为高度，并且取消原来的宽度
      $(this).height(w).width('');
  });

  $.each( component.find('.per'),function(){
      //  任务二：(4) 重新调整 DOM 结构，把百分比数值(.per)添加到 进度区 (.rate)中，和色块元素(.bg)同级。提示，获得 进度区 元素：$(this).prev() 
      $(this).appendTo( $(this).prev() ) ;
  })

  return component;
}