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