Question

我正在努力克服上一个问题中发现的问题。因为它似乎没有100％可能，所以我试图破坏canvas元素并重新附加它，从而清除canvas元素上的所有旋转。

然而，这几乎是最后一步，当从chart.js重绘图表时，什么都没有出现。

在图表的onComplete内放置一些console.log，在控制台中显示数据，但不显示任何内容。

当前jsfiddle并未显示onComplete数据。

jsfiddle我正在尝试修复旋转问题。

上一个问题： here

我在画布上绘制一个轮子，旋转它然后想要将旋转重置为0.但是由于css属性：-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版本看起来有些问题。我将其更改为最新版本（2.1 @ https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.min.js）
在执行$('#wheel').remove();之前，您需要执行myChart.destroy();从Chart.js的内部对象列表中删除该特定图表（当窗口调整大小时，它用于调整现有图表的大小）< / p>
代码中的以下位清除完整数据。

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

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

如果您希望下次运行所有扇区，只需删除该块。

小提琴 - https://jsfiddle.net/wzbxuo5n/

重置变换：rotate（）通过在追加和重绘图表后删除并附加不显示数据的画布

1 个答案: