動畫圖表上開始的

-1

頁面

的spcific一部分，我有此腳本動畫圖表上開始的

var doughnutData = [ 
      { 
       value: 10, 
       color:"#444444", 
       highlight: "#535353", 
       label: "Contrato de Assistência" 
      }, 
      { 
       value: 25, 
       color: "#707070", 
       highlight: "#7F7F7F", 
       label: "Assistência Técnica" 
      }, 
      { 
       value: 10, 
       color: "#CECECE", 
       highlight: "#E2E2E2", 
       label: "Entrega ao Domicílio" 
      }, 
      { 
       value: 55, 
       color: "#262626", 
       highlight: "#383838", 
       label: "Atendimento ao Público" 
      } 

     ]; 

     window.onload = function(){ 
      var ctx = document.getElementById("chart-area").getContext("2d"); 
      window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true}); 
     };

這是這樣一個http://codepen.io/IanVS/pen/EaZWyo動畫圓環圖。

但是當頁面加載並且我想啓動頁面的特定部分時，動畫開始。

來源

2015-10-07 Nuno Correia

[如何使Chart.js動畫滾動到該部分時可能的重複？]（http://stackoverflow.com/questions/18772547/how-to-make-the-chart-js-animate-when -scrolled到該截面） – Goowik

這樣的事情，你想要什麼我使用這個庫：

https://github.com/customd/jquery-visible

此庫檢查，如果事情是在頁面上可見的，所以你可以等待，看看事情是可見的啓動動作。如果元素是可見的，我確實把計時器每隔一段時間檢查一次。

你的情況可能是這樣的：

 jQuery(document).ready(function($) { 
      var timer = window.setInterval(check_visible, 250); 

      function check_visible(){ 
      var visible = $('#chart-area').visible("complete"); 
      if(visible){ 
       clearInterval(timer); 
       var ctx = document.getElementById("chart-area").getContext("2d"); 
       window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true}); 
      } 
      } 
     });

我用它在我的網頁上。你可以看看你是否向下滾動。

來源

2015-10-07 09:24:07

動畫圖表上開始的

回答

相關問題