慕课网实战—《用组件方式开发 Web App全站 》笔记五-折线图组件开发

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

折现图绘制大致步骤

折线图画布

• JavaScript
  

• CSS
  

折线图绘制网格线

// 水平网格线  100份 -> 10份
    var step = 10;
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.strokeStyle = ‘#AAAAAA‘;
    window.ctx = ctx;
    for(var i=0;i<step+1;i++){
        var y = (h/step) * i;
        ctx.moveTo(0,y);
        ctx.lineTo(w,y);    
    }

    // 垂直网格线(根据项目的个数去分)
    step = cfg.data.length+1;
    var text_w = w/step >> 0;
    for(var i=0;i<step+1;i++){
        var x = (w/step) * i;
        ctx.moveTo(x,0);
        ctx.lineTo(x,h);
        if( cfg.data[i] ){
            var text = $(‘<div class="text">‘);
            text.text( cfg.data[i][0] );
            text.css(‘width‘,text_w/2).css( ‘left‘,(x/2 - text_w/4) + text_w/2 );

            component.append( text );   
        }
    }
    ctx.stroke();
    component.append( cns );

实现效果：

??????

折线图画点

// 画点
        for ( i in cfg.data){
            var item = cfg.data[i];
            x = row_w * i + row_w;
            y = h-( item[1]*h*per);
            ctx.moveTo(x,y);
            ctx.arc(x,y,5,0,2*Math.PI); 
        }
        // 连线
          // 移动画笔到第一个数据的点位置

        ctx.moveTo( row_w, h-( cfg.data[0][1]*h*per) );
        // 测试 ctx.arc(row_w,h * ( 1-cfg.data[0][1]),10,0,2*Math.PI);
        for ( i in cfg.data){
            var item = cfg.data[i];
            x = row_w * i + row_w;
            y = h-( item[1]*h*per);
            ctx.lineTo(x,y);    
        }
        ctx.stroke();   
        ctx.lineWidth = 1;
        ctx.fillStyle = (‘rgba(255, 255, 255, 0)‘);

实现效果：

折线图连线绘制数据及阴影

// 加入画布 - 数据层
    var cns = document.createElement(‘canvas‘);
    var ctx = cns.getContext(‘2d‘);
    cns.width = ctx.width = w;
    cns.height = ctx.height = h;    
    component.append( cns );

    /**
     * 绘制折现以及对应的数据和阴影
     * @param {[floot]} per 0大1之间的数据，会根据这个值绘制最终数据对应的中间状态
     * @return {DOM]}  Component元素
     */
    var draw = function( per ){
        // 清空画布
        ctx.clearRect(0,0,w,h);
        // 绘制折线数据
        ctx.beginPath();    
        ctx.strokeStyle = ‘#ff8878‘;

        var x = 0;
        var y = 0;  
        var row_w = ( w/(cfg.data.length+1) );

        // 画点
        for ( i in cfg.data){
            var item = cfg.data[i];
            x = row_w * i + row_w;
            y = h-( item[1]*h*per);
            ctx.moveTo(x,y);
            ctx.arc(x,y,5,0,2*Math.PI); 
        }
        // 连线
          // 移动画笔到第一个数据的点位置

        ctx.moveTo( row_w, h-( cfg.data[0][1]*h*per) );
        // 测试 ctx.arc(row_w,h * ( 1-cfg.data[0][1]),10,0,2*Math.PI);
        for ( i in cfg.data){
            var item = cfg.data[i];
            x = row_w * i + row_w;
            y = h-( item[1]*h*per);
            ctx.lineTo(x,y);    
        }
        ctx.stroke();   
        ctx.lineWidth = 1;
        ctx.fillStyle = (‘rgba(255, 255, 255, 0)‘);

        // 绘制阴影
        ctx.lineTo(x,h);
        ctx.lineTo(row_w,h);
        ctx.fillStyle = (‘rgba(255, 136, 120, .2)‘);
        ctx.fill();

        // 写数据
        for ( i in cfg.data){
            var item = cfg.data[i];
            x = row_w * i + row_w;
            y = h-( item[1]*h*per);     
            ctx.fillStyle = item[2] ? item[2] : ‘#595959‘;      
            ctx.fillText( ( (item[1]*100)>>0 )+‘%‘, x-10, y-10 );
        }

        ctx.stroke();
    }

实现效果：

??????

绘制项目名称

/* 折线图组件样式 */

.h5_component_polyline{

}
.h5_component_polyline canvas{
    position: absolute;
    left: 0;
    top: 0; /* 用canvas做动画，会进行分层，要用到 z-index */
    width: 100%;
    height: 100%;
}

.h5_component_polyline .text{
    position: absolute;
    font-size: 12px;
    text-align: center; 
    bottom: -20px;
    height: 20px;
    line-height: 20px;
    transform: scale(.8);
    -webkit-transform: scale(.8);
    -webkit-transition: all 1s 1.5s;
    -webkit-opacity: 0;
}

.h5_component_polyline_load .text{
    -webkit-opacity: 1;     
}
.h5_component_polyline_leave .text{
    -webkit-opacity: 0;
}

实现效果：

??????

折线动画及项目名称动画

component.on(‘onLoad‘,function(){
        // 折线图生长动画
        var s = 0;
        for( i=0;i<100;i++){

            setTimeout(function(){
                s+=.01;
                draw(s);
            },i*10+500)
        }

    })
    component.on(‘onLeave‘,function(){
        // 折线图退场动画
        var s = 1;
        for( i=0;i<100;i++){

            setTimeout(function(){
                s-=.01;
                draw(s);
            },i*10)
        }

    })

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">


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

    <body>
        <!-- 用于开发测试 H5ComponentPolyline 对象（折线组件） -->
        <div class="iphone">

        </div>

        <script type="text/javascript">
            var cfg = {
                type : ‘polyline‘,

                width : 530,
                height : 400,
                data : [
                    [‘JS‘,.4,‘#ff7676‘],
                    [‘HTML5‘,.2],
                    [‘CSS3‘,.3],
                    [‘PHP‘,.1],
                    [‘jQuery‘,.2]
                ],
                css : {
                    top:100,
                    opacity:0
                },
                animateIn:{
                    opacity:1,
                    top:200,
                },
                animateOut:{
                    opacity:0,
                    top:100,
                },
                center:true,
            }
            var h5 = new H5ComponentPolyline(‘myPolyline‘,cfg);
            $(‘.iphone‘).append(h5);
            var leave = true;
            $(‘body‘).click(function(){
                leave = !leave;
                $(‘.h5_component‘).trigger( leave ? ‘onLeave‘ : ‘onLoad‘);

            });

        </script>

    </body>

整体实现效果：

??????