一款基于HTML5 Canvas的微信运动折线图jQuery插件。这款插件是网友LipsonChan在工作过程中编写的。通过该插件你可以制作出某段时间内的动态折线图信息,非常有用。
使用该微信运动折线图插件需要在页面中引入jquery和wc-motion-chart.js文件
12 |
<script type= "text/javascript" src= "js/jquery.min.js" ></script> <script type= "text/javascript" src= "js/wc-motion-chart.js" ></script> |
HTML结构该微信运动折线图的基本HTML结构是一个Canvas元素,为该元素设置宽度和高度。-webkit-tap-highlight-color属性只针对iOS设置。在iPhone或ipad中,当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。你可以通过-webkit-tap-highlight-color属性来修改这个颜色。这里将透明度设置为0,使该颜色不可见。
1234567 |
< 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 > |
初始化插件在页面DOM元素加载完毕之后,你可以通过wcChart()方法来初始化该插件。
1 |
$( '#wcMotion' ).wcChart(); |
你可以使用 setTimeout()方法来动态实时更新该折线图的数据。
window.setTimeout(
function
() {
var
height = $(
'#wcMotion'
).height() + 125;
$(
'#wcMotion'
).height(height);
today.setDate(today.getDate() - 1);
$(
'#wcMotion'
).wcChart({
height: height,
day: 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);
- jQuery图片热点链接添加编辑插件
- Jquery验证插件,获取错误字符串
- jquery插件ztree的总结
- 自定义滚动条插件
- 为$ .plugin()用法准备插件而不是$(selector).plugin()
- jQuery轻量级圆形进度指示器插件
- jquery.countdown 倒计时插件的学习
- flah网站发布问题,我是在flash里面直接发布成html格式,如何提示安
- 是否可以直接使用jquery和Svg(没有插件)?
随机推荐
-
Android源码树添加新的APP(含第三方so、ja
-
android自带的drawable图标ico名称对应表
-
android Mainifest权限设置清单
-
Android dp方式的屏幕适配工具使用(Andro
-
android 安装和卸载程序
-
android排版布局学习
-
android异步图片加载三之handler+线程池+
-
【分享】大量android软件开发资料和实例
-
Android媒体的一些使用总结(2)
-
ok6410 android driver(1)