HTML5 Canvas线性图表特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5 Canvas线性图表特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>HTML5 Canvas线性图表</title>
	<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:before, :after {
  content: '';
  display: block;
  position: absolute;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  background: #eee;
}

.wrapper {
  padding: 50px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
}

#canvas {
  display: block;
  margin: 0 auto;
}

</style>

</head>

<body>

  <div class='wrapper'>
  <canvas height='300' id='canvas' width='900'></canvas>
</div>
  <script src='js/Chart.min.js'></script>
  <script src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

var myData ={
	labels:["Mo","Di","Mi","Do","Fr","Sa","So"],datasets:[{
	fillColor:"rgba(220,220,220,.5)",strokeColor:"rgba(220,220,220,1)",pointColor:"rgba(220,220,220,1)",pointStrokeColor:"#fff",data:[65,59,90,81,56,55,40]}
,{
	fillColor:"rgba(90,190,90,.5)",strokeColor:"rgba(90,190,90,1)",pointColor:"rgba(90,190,90,1)",pointStrokeColor:"#fff",data:[40,48,40,40,90,27,90]}
]}
new Chart(document.getElementById("canvas").getContext("2d")).Line(myData)

CSS代码(style.css):

*{margin:0;padding:0;box-sizing:border-box;}
:before,:after{content:'';display:block;position:absolute;box-sizing:border-box;}
html,body{height:100%;background:#eee;}
.wrapper{padding:50px 0;border-bottom:1px solid rgba(0,0,0,0.1);background:#fff;}
#canvas{display:block;margin:0 auto;}

附件:下载该文件资源,减少时间成本(增值服务)