javascript - 重置变换: rotate() by removing and appending canvas not showing data after appending and redrawing chart

Question

我正在努力克服上一个问题中发现的问题。由于这似乎不是 100% 可能，我尝试销毁 Canvas 元素并重新附加它，从而清除 Canvas 元素上的所有旋转。

这几乎有效，但是最后一步，当从 Chart.js 重新绘制图表时，什么也没有出现。

将一些console.log放入chart.js的onComplete中会在控制台中显示数据，但什么也没有出现。

当前jsfiddle onComplete 数据未出现。

jsfiddle我正在尝试解决旋转问题。

上一个问题: here

我正在 Canvas 上画一个轮子，旋转它，然后想要将旋转重置为 0。但是由于 css 属性:-webkit-transition: -webkit-transform 15s ease;重置旋转时，从r -> 0旋转，需要15秒。有没有办法在不调用 transform 15s Easy 的情况下重置旋转？

旋转变换完成后，我正在 Canvas 上重新绘制数据，因此需要立即重置。

非常感谢

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

经过一些更改，您的代码应该可以工作

1. 您使用的 Chart.js 版本似乎存在一些问题。我将其更改为最新版本(2.1 @ https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.min.js )

2. 在执行 $('#wheel').remove(); 之前，您需要执行 myChart.destroy(); 来删除该特定图表来自 Chart.js 的内部对象列表(当窗口调整大小时，它使用它来调整现有图表的大小)

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 来初始化图表，因此您实际上是在尝试绘制空白图表。我认为这是某种复制粘贴错误。我在更新的 fiddle 中更改了它，仅删除最后一个扇区，就像这样。

var i=chartData.datasets[0].data.length-1;
chartData.datasets[0].data.splice(i,1);
chartData.datasets[0].backgroundColor.splice(i,1);

如果您希望下次运行时再次使用所有扇区，只需删除该 block 即可。

<小时/>

fiddle - https://jsfiddle.net/wzbxuo5n/