アニメーションが実行される前にonAnimationCompleteが実行されます

Question

私のグラフにchart.jsを使用し、キャンバスに.toDataURLを使用します。

コールバック関数onAnimationCompletedでアニメーションが完了した後にURLを取得しようとしましたが、URLに空の画像が含まれています。アラートを入れると（コメントを参照）、アニメーションが視覚的に行われる前にアラートが表示されます。

ここでHTML

<h1>Chart as img</h1> 
<img id="foobar" src="" /> 

<h1>Original Canvas</h1> 
<canvas id="myChart" width="300" height="300"></canvas> 

とJSです：

var ctx = $("#myChart"); 
var myChart = new Chart(ctx, { 
    type: 'doughnut', 
    data: { 
     labels: ["Red", "Blue",], 
     datasets: [{ 
      data: [ 
       12, 
       19 
      ], 
      backgroundColor: [ 
       'rgba(255, 99, 132, 0.2)', 
       'rgba(54, 162, 235, 0.2)', 
      ], 
      borderColor: [ 
       'rgba(255,99,132,1)', 
       'rgba(54, 162, 235, 1)', 
      ], 
      borderWidth: 1 
     }] 
    }, 
    options: { 
     responsive: false, 
     legend: { 
      display: false, 
     }, 
     onAnimationComplete: done(), 
    } 
}); 

function done() { 
    var url = document.getElementById("myChart").toDataURL(); 
    // alert(url); 
    $("#foobar").attr("src", url); 
} 

http://jsfiddle.net/7tjgf582/

Answer 1

シンプル。 done機能を呼び出さないでください。

options: { 
    responsive: false, 
    legend: { 
     display: false, 
    }, 
    onAnimationComplete: done // <--- no parentheses! 
} 

Answer 2

私は、スクリプトがブラウザで実行されたとき、あなたの関数を直接calledされているので、それが起こっていると思います。それはコールバックではありません。私はこれを行う場合は何の警告も起こりません

//Notice how I am using the variable instead of calling the function. 
onAnimationComplete: done