web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
图表
基于Canvas的微信运动折线图jQuery插件
分类:
图表
日期:
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
使用该微信运动折线图插件需要在页面中引入jquery和wc-motion-chart.js文件 ```html ``` ##### HTML结构 该微信运动折线图的基本HTML结构是一个Canvas元素,为该元素设置宽度和高度。-webkit-tap-highlight-color属性只针对iOS设置。在iPhone或ipad中,当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。你可以通过-webkit-tap-highlight-color属性来修改这个颜色。这里将透明度设置为0,使该颜色不可见。 ```html
``` ##### 初始化插件 在页面DOM元素加载完毕之后,你可以通过wcChart()方法来初始化该插件。 ```html $('#wcMotion').wcChart(); ``` 你可以使用 setTimeout()方法来动态实时更新该折线图的数据。 ```html 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 change day: today, data: [14759, 0, 2000, 8000, 3252, 5645, 6000, 34, 5454, 2], rankRef : {height: 125, avatar: avatarImg, title: "夺得03月13日排行榜冠军", url: "http://web299.com/"}, }); }, 1000); ``` 其中参数data中的数据可以通过ajax来获取,data数组中各个的数值代表每个折线点的值。
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告