重置transform:rotate(），方法是移除并追加在追加和重绘图表后未显示数据的画布

Resetting transform: rotate() by removing and appending canvas not showing data after appending and redrawing chart

本文关键字：追加 绘图 显示 数据 重置 rotate 方法 transform      更新时间：2023-09-26

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

然而，这几乎奏效了。最后一步，从chart.js重新绘制图表时，什么都没有出现。

在chart.js的onComplete中放入一些console.log会在控制台中显示数据，但不会显示任何内容。

当前jsfiddle with onComplete数据未出现。

jsfiddle的旋转问题，我正试图解决。

上一个问题：此处

我正在画布上画一个轮子，旋转它，然后想将旋转重置为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");
});

经过几次更改，您的代码应该可以使用

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

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

如果你想在下一次运行中再次使用所有扇区，只需删除该块即可。

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

相关文章：