当前位置：首页 > 网页特效 > 图表

基于Canvas的微信运动折线图jQuery插件

分类：图表日期：2024-05-14 点击(0) 评论(0)

简介

使用该微信运动折线图插件需要在页面中引入jquery和wc-motion-chart.js文件

```html
<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，使该颜色不可见。

```html
<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()方法来初始化该插件。

```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数组中各个的数值代表每个折线点的值。

web299.com

基于Canvas的微信运动折线图jQuery插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果