canvas 数据图表

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

// 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();

}

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