以下是 HTML5 Canvas微信运动折线图特效 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Canvas微信运动折线图特效</title>
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
</head>
<body>
<div class="circles">
<div class="circle">
<canvas id='wcMotion' style="width:912px; height:515px; margin: 0 26px; -webkit-tap-highlight-color: rgba(0,0,0,0);"></canvas>
</div>
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="dist/wc-motion-chart.js"></script>
<script src="js/example.js"></script>
</body>
</html>JS代码(example.js):
/* load image*/
var avatarImg = new Image();
avatarImg.src = "image/avatar.jpg";
/* init chart */
var today = new Date();
$('#wcMotion').wcChart({
fill:{
gradient:[["#21B881",.1],["#0E8FA2",.9]],gradientAngle:Math.PI * -45/180}
,}
);
/* do something,may be you need get data with ajax */
window.setTimeout(function(){
/* change height for rank */
var height = $('#wcMotion').height() + 125;
$('#wcMotion').height(height);
/* load data */
today.setDate(today.getDate() - 1);
$('#wcMotion').wcChart({
height:height,// width and height must be set if changeday:today,data:[14759,0,2000,8000,3252,5645,6000,34,5454,2],rankRef:{
height:125,avatar:avatarImg,title:"夺得03月13日排行榜冠军",url:"http://www.htmleaf.com"}
,}
);
}
,1000);
/* change image url and you can see redraw later */
window.setTimeout(function(){
avatarImg.src = "https://s-media-cache-ak0.pinimg.com/236x/7a/32/50/7a3250c0094a3c80edee5e30f2f67667.jpg";
}
,2000);
CSS代码(zzsc.css):
.circle{width:915px;height:520px;margin:50px auto;}
分享到QQ
分享到微博
微信扫一扫
