慕課網實戰—《用組件方式開發 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>

整體實現效果：

??????

慕課網實戰—《用組件方式開發 Web App全站 》筆記五-折線圖組件開發