jQuery基于Canvas的微信運動折線圖動態曲線圖插件 - wcMotionChart3361
一款基于HTML5 Canvas的微信運動折線圖jQuery插件。這款插件是網友LipsonChan在工作過程中編寫的。通過該插件你可以制作出某段時間內的動態折線圖信息,非常有用。
使用該微信運動折線圖插件需要在頁面中引入jquery和wc-motion-chart.js文件
<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,使該顏色不可見。
<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()方法來初始化該插件。
$('#wcMotion').wcChart();    
你可以使用 setTimeout()方法來動態實時更新該折線圖的數據。
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://www.htmleaf.com"},
  });
}, 1000);        

技術討論區(1 個討論)

  1. Remember*XX 1

    Remember*XX

    下載了怎么打不開

    2017-6-19 19:36:17 | 回復

  2. 請先登錄

      發 布
深圳风采彩票