Chart.js動畫滾動

我正在使用chart.js，但我也想在滾動顯示圖表。Chart.js動畫滾動

我與此代碼的工作：DEMO 1

var doughnutData = [ 
      { 
       value: 30, 
       color:"#F7464A" 
      }, 

      { 
       value : 120, 
       color : "#4D5360" 
      } 

     ]; 


var myDoughnut = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(doughnutData);

但它總是出現，而不是滾動。

尋找arouond我看到這個小提琴至極做的效果： DEMO 2

但在更新下面的代碼給我的第一演示不起作用：DEMO 1 UPDATED

來源

2014-03-19 Xavi Alsina

doughnutData代替data

new Chart(document.getElementById("canvas").getContext("2d")).Pie(doughnutData);

JSFiddle

如果你需要一個doghnut：

JSFiddle

來源

2014-03-19 15:14:27

運行完美！剛剛修改了代碼的最後部分：getContext（「2d」））。Donut（doughnutData）;因爲我想要甜甜圈一個，而不是餡餅。 –

如果你不想要的是重啓每滾動，試試這個：

$(window).bind("scroll", function(){    
    $('.startChart').each(function(i){  
     var options = { 
       animationEasing: 'easeOutQuart',   
       animationSteps: 150, 
       segmentShowStroke: true, 
       segmentStrokeColor: 'FFF'     
     }; 
     var doughnutData = [ 
      {value: 30, color:"#F7464A"},    
      {value : 120,color : "#4D5360"}   
     ]; 
     var myDoughnut = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(doughnutData, options); 
     $(window).unbind(i); 
    }); 
});

http://jsfiddle.net/MU9aw/74/

來源

2014-04-27 07:23:53 user3577712

Chart.js動畫滾動

回答

相關問題