我正在努力克服上一个问题中发现的问题。由于这似乎不是 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");
});
最佳答案
经过一些更改,您的代码应该可以工作
您使用的 Chart.js 版本似乎存在一些问题。我将其更改为最新版本(2.1 @ https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.min.js )
在执行
$('#wheel').remove();
之前,您需要执行myChart.destroy();
来删除该特定图表来自 Chart.js 的内部对象列表(当窗口调整大小时,它使用它来调整现有图表的大小)代码中的以下位将清除完整数据。
... 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/
关于javascript - 重置变换: rotate() by removing and appending canvas not showing data after appending and redrawing chart,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37032362/