変換をリセットする：グラフを追加して再描画した後にデータを表示しないキャンバスを削除して追加してrotate（）する

Question

私は以前の質問で見つかった問題を解決しようとしています。それは100％可能ではないように思われるので、私はキャンバス要素を破棄し、キャンバス要素のすべての回転をクリアするように再追加しようとしています。

これは最後のステップですが、chart.jsからグラフを再描画すると、何も表示されません。

chart.jsのonCompleteにconsole.logをいくつか入れてもコンソールにデータが表示されますが、何も表示されません。

現在jsfiddleのデータは表示されません。

jsfiddle私が修正しようとしている回転の問題があります。

前の質問：here

私は、キャンバス上でホイールを描く、それを回転させ、その後に起因CSSプロパティにただし0に回転をリセットしたいのです：-webkit-transition: -webkit-transform 15s ease;回転をリセットするとき、それは回転はr -> 0から15秒かかります。 transform 15s easeを呼び出さずにローテーションをリセットする方法はありますか？

回転変換が完了した後にキャンバス上でデータを再描画しているため、インスタントリセットが必要です。

感謝変化のカップルと

var r=-(3600 + random); 
$("#wheel").css("transform","rotate("+r+"deg)"); 
$("#wheel").css("-moz-transform","rotate("+r+"deg)"); 
$("#wheel").css("-webkit-transform","rotate("+r+"deg)"); 
$("#wheel").css("-o-transform","rotate("+r+"deg)"); 

$("#wheel").one('webkitTransitionEnd', function() { 
    $("#wheel").css("transform","none"); 
    $("#wheel").css("-moz-transform","none"); 
    $("#wheel").css("-webkit-transform","none"); 
    $("#wheel").css("-o-transform","none"); 
}); 

Answer 1

、あなたのコードは、使用しているChart.jsバージョンといくつかの問題があるよう

1. が見える動作するはずです。私はあなたが$('#wheel').remove();あなたはそれが既存のグラフのサイズを変更するために使用するオブジェクト（のChart.jsの内部リストからその特定のチャートを削除するにはmyChart.destroy();を行う必要が行う前に、最新バージョン（https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.min.js @ 2.1）

2. にそれを変更したときに、ウィンドウリサイズ）

3. コードの次のビットが完全なデータを消去します。

... 
    for(i=chartData.datasets[0].data.length-1; i>=0; i--) { 
     chartData.datasets[0].data.splice(i,1); 
     chartData.datasets[0].backgroundColor.splice(i,1); 
    } 
    ... 

ますので、その後、あなたのチャートを初期化するユーザーchartData、あなたは効果的に空白のチャートを描画しようとしています。私はこれが何らかのコピー・ペースト・エラーであると仮定します。私は最新のフィドルでそれを変更して、最後のセクターだけを削除しました。

すべてのセクタを次回実行する場合は、そのブロックを削除してください。

---

フィドル - https://jsfiddle.net/wzbxuo5n/