MU Lesson Net combat-"the development of Web app by component Way" note Five-line Chart Component development

The use of HTML5, CSS3, JS Popular technology, the use of component-based development model, the development of web App all stations! Technology Daniel takes you all the different types of HTML5 Dynamic Data reports!
Development of Web app whole station using component mode

Drawing approximate steps of a discounted drawing

Line drawing Cloth

• Javascript
  

• Css
  

Line chart Drawing Gridlines

//Horizontal grid line 100 parts-10 parts    varStep =Ten;    Ctx.beginpath (); Ctx.linewidth =1; Ctx.strokestyle =' #AAAAAA '; Window.ctx = CTX; for(varI=0; i<step+1; i++) {vary = (h/step) * i; Ctx.moveto(0, y);        Ctx.lineto (W,y); }//Vertical grid lines (according to the number of items to be divided)Step = Cfg.data.length+1;varText_w = W/step >>0; for(varI=0; i<step+1; i++) {varx = (w/step) * i; Ctx.moveto (x, 0); Ctx.lineto (X,H);if(Cfg.data[i]) {varText = $ (' <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);

Implementation results:

??????

Polyline Drawing points

Draw Dot for (iinchCfg.Data){var  item  = cfg . data             [i ]; x  = row_w  * i  +            Span class= "Hljs-title" >row_w ; y  = h -(item  [1]*<            Span class= "Hljs-title" >h  *per ); ctx . moveto             (x , y ); ctx . arc  (x , y , 5,0,2*math  .         pi ); }Connect//Move the brush to the point position of the first Data Ctx.moveto (Row_w, H (CFG). Data[0][1]*h*per]);Test Ctx.arc (Row_w,h * (1-cfg. Data[0][1]), 10,0,2*Math. PI);for (iinchCfg. 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)‘);

Implementation results:

Line chart lines draw data and shadows

//Join canvas-Data layer    varCNS = document.createelement (' Canvas ');varCTX = Cns.getcontext (' 2d ');    Cns.width = Ctx.width = W;        Cns.height = Ctx.height = h; component.append (CNS);/** * Draw the discounted data and the corresponding data and shadow * @param {[floot]} per 0 of the large 1, according to this value will draw the final data corresponding to the intermediate state * @return {DOM] } component Element * /    varDraw = function (per) {//Empty canvasCtx.clearrect (0,0, w,h);//Draw polyline dataCtx.beginpath (); Ctx.strokestyle =' #ff8878 ';varx =0;vary =0;varRow_w = (w/(cfg.data.length+1) );//Draw points         for(I in Cfg.data) {varitem = 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); }//Wire          //Move the brush to the point position of the first dataCtx.moveto (Row_w, H (cfg.data[0][1]*h*per));//Test Ctx.arc (ROW_W,H * (1-cfg.data[0][1]), 10,0,2*MATH.PI);         for(I in Cfg.data) {varitem = 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) ');//Draw ShadowsCtx.lineto (X,H);        Ctx.lineto (ROW_W,H); Ctx.fillstyle = (' Rgba (255, 136, 2) '); Ctx.fill ();//Write Data         for(I in Cfg.data) {varitem = 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]* -) >>0)+'% ', X-Ten, YTen);    } ctx.stroke (); }

Implementation results:

??????

Draw the project name

/ * Line Chart Component style * /. H5_component_polyline{}. H5_component_polyline Canvas{  position: absolute;    Left  : 0;  top: 0; / * Animate with canvas, layering, using z-index * /     width: %;  height: %; }    . H5_component_polyline . Text{ position: Absolute ; font-size: px ; text-align: Center ; Bottom: -px ; height: px ; line-height: px ; 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;} 

Implementation results:

??????

Line animation and project name animation

Component.on (' OnLoad ', function(){        //Line chart Growth animation        vars =0; for(i=0;i< -; i++) {SetTimeout ( function(){s+=.;            Draw (s); },i*Ten+ -)}}) Component.on (' Onleave ', function(){        //Line chart exit animation        vars =1; for(i=0;i< -; i++) {SetTimeout ( function(){s-=.;            Draw (s); },i*Ten)        }    })

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 ">    <!--Introduction Bar-Vertical resource-    <script type="text/javascript" src="... /js/h5componentpolyline.js "></script>    <link rel="stylesheet" type="text/css" href=". /css/h5componentpolyline.css ">    <body>        <!--for developing test H5componentpolyline objects (polyline components)--        <div class="iphone">        </div>        <script type="Text/javascript">            varCFG = {type:' polyline ', Width:530, Height: -, Data: [[' JS ',. 4,' #ff7676 '],                    [' HTML5 ',. 2],                    [' CSS3 ',. 3],                    [' PHP ',. 1],                    [' JQuery ',. 2], CSS: {top: -, opacity:0}, animatein:{opacity:1, Top: $,}, animateout:{opacity:0, Top: -,}, Center:true,            }varH5 =NewH5componentpolyline (' Mypolyline ', CFG); $('. iphone '). Append (h5);varLeave =true; $(' body '). Click ( function(){leave =!leave; $('. H5_component '). Trigger (leave?' Onleave ':' OnLoad '); });</script>    </body>

Overall implementation effect:

??????

MU Lesson Net combat-"the development of Web app by component Way" note Five-line Chart Component development