Chartjs - onAnimationComplete在動畫實際完成之前觸發

Question

我的問題是事件onAnimationComplete在圖表實際完成繪圖之前觸發。

我使用ASP.NET MVC。

這是我的代碼：

HTML：

<canvas id="scanedTodayChart" width="100" height="100"></canvas> 

JS：

var scanedTodayChartCtx = document.getElementById("scanedTodayChart").getContext("2d"); 
var scanedTodayChart = new Chart(scanedTodayChartCtx, { 
    type: 'pie', 

    data: { 
     labels: [ 
      "Red", 
      "White", 
     ], 
     datasets: [ 
     { 
      data: [10, 100], 
      backgroundColor: [ 
       "#DA1A32", 
       "#F0FFFF" 
      ], 
      borderWidth: false, 
      borderColor: false 
     }] 
    }, 
    options: { 
     cutoutPercentage: 90, 
    }, 
    borderColor: '#DA1A32', 
    fullWidth: true, 
    onAnimationComplete: new function() { 
     alert('onAnimationComplete') 
    } 
}); 

Answer 1

我想你沒有定義動畫。嘗試this example找到Chart.js documentation。

var scanedTodayChart = new Chart(scanedTodayChartCtx, { 
    type: 'pie', 

    data: { 
     labels: [ 
      "Red", 
      "White", 
     ], 
     datasets: [ 
     { 
      data: [10, 100], 
      backgroundColor: [ 
       "#DA1A32", 
       "#F0FFFF" 
      ], 
      borderWidth: false, 
      borderColor: false 
     }] 
    }, 
    options: { 
     cutoutPercentage: 90, 
     animation: { 
      duration: 2000, 
      onProgress: function(animation) { 
       $progress.attr({ 
        value: animation.animationObject.currentStep/animation.animationObject.numSteps, 
       }); 
      }, 
      onComplete: function(animation) { 
       alert('onAnimationComplete') 
      } 
     } 
    }, 
    borderColor: '#DA1A32', 
    fullWidth: true, 
});