canvas 数据图表

HTML5

<section>
    <header>
       <h3>图表数据</h3>
    </header>
    <figure id="locak">
       <div class="left_data">
            <div class="la">50000</div>
            <div class="la">25000</div>
            <div class="la">5000</div>
            <div class="la">1000</div>
            <div class="la">500</div>
        </div>
       <div class="bottom_data">
            <div class="la">Jan 2012</div>
            <div class="la">Feb 2012</div>
            <div class="la">March 2012</div>
            <div class="la">April 2012</div>
            <div class="la">May 2012</div>
       </div>
       
       <canvas id="ccc" width="880" height="370"></canvas>
    </figure>
</section>

JS

 

// JavaScript Document
$(document).ready(function(){
    $('.left_data > .la').first().css("margin","0px");
    $('.bottom_data > .la').first().css("margin","0px");
    lili();
});
var colors = ['#a4a4a4','#e3e3e3','#b57fe3','#7f90e3','#7fcfe3','#7fe3d4','#7fe399','#b5e37f','#e3e27f','#e3ba7f','#e3a77f','#e37f7f','#e37fd6','#b57fe3','#7f90e3','#7fcfe3','#7fe3d4','#7fe399','#b5e37f','#e3e27f','#e3ba7f','#e3a77f'];//全局变量
function lili(){
    var cc=document.getElementById('ccc');
    var context=cc.getContext('2d');
    //Y轴
    context.beginPath();
    context.lineWidth=2;
    context.strokeStyle=colors[0];
    
    context.moveTo(48,0);
    context.lineTo(48,330);
    context.closePath();
    context.stroke();
    //X轴
    context.beginPath();
    context.lineWidth=2;
    context.strokeStyle=colors[0];

    context.moveTo(48,330);
    context.lineTo(880,330);
    context.closePath();
    context.stroke();
    //等数据线1000
    context.beginPath();
    context.strokeStyle=colors[1];
    context.moveTo(50,248);
    context.lineTo(880,248);
    context.closePath();
    context.stroke();
    //等数据线5000
    context.beginPath();
    context.strokeStyle=colors[1];
    context.moveTo(50,168);
    context.lineTo(880,168);
    context.closePath();
    context.stroke();
    
    //等数据线25000
    context.beginPath();
    context.strokeStyle=colors[1];
    context.moveTo(50,88);
    context.lineTo(880,88);
    context.closePath();
    context.stroke();
    
    //等数据线50000
    context.beginPath();
    context.strokeStyle=colors[1];
    context.moveTo(50,8);
    context.lineTo(880,8);
    context.closePath();
    context.stroke();
    
    //数据填充
    
    context.beginPath();
    context.strokeStyle=colors[11];
    context.fillStyle=colors[11];
    context.moveTo(48,330);
    context.lineTo(78,300);
    context.lineTo(128,230);
    context.lineTo(298,100);
    context.lineTo(598,160);
    context.lineTo(880,270);
    context.lineTo(880,330);
    context.lineTo(48,330);
    //context.fillRect(48,300,832,30);
    
    context.closePath();
    context.stroke();
    context.fill();
    context.save();
    context.restore();
    const TIME = 1     
    var factor = 0.8;
    
    context.globalAlpha= (Math.sin(factor) + 1) / 2; 
    context.beginPath();
    context.strokeStyle=colors[12];
    context.fillStyle=colors[12];
    context.moveTo(48,330);
    context.lineTo(98,200);
    context.lineTo(148,230);
    context.lineTo(498,120);
    context.lineTo(698,160);
    context.lineTo(880,270);
    context.lineTo(880,330);
    context.lineTo(48,330);
    //context.fillRect(48,300,832,30);
    
    context.closePath();
    context.stroke();
    context.fill();

}

 

CSS

@charset "utf-8";
/* CSS Document */
/* - 1.0. - CSS RESET
---------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display:block }
audio, canvas, video { display:inline-block; *display:inline;*zoom:1}
audio:not([controls]) {display:none}
[hidden] {display:none}
* { outline:0!important; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; transition-timing-function:ease-out; -moz-transition-timing-function:ease-out; -webkit-transition-timing-function:ease-out; -o-transition-timing-function:ease-out; transition-duration:.3s;
-moz-transition-duration:.3s;-webkit-transition-duration:.3s;-o-transition-duration:.3s}
html { overflow-x:hidden; font-size:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100% }

h3{font-size:30px; font-family:Arial}
.clear{clear:both}

/*ob*/
#locak{ position:absolute}
.left_data{position:absolute; left:5px; top:0}
.left_data .la{margin-top:66px;font-size:12px; font-family:"pill-gothic-300mg"; text-align:right}
.bottom_data{position:absolute; bottom:0;left:45px}
.bottom_data .la{margin-left:126px; float:left; text-align:left; font-size:12px; font-family:"pill-gothic-300mg"}