Charts.js甜甜圈

Question

我使用Charts.js Doughnut chart显示按时间间隔到达的动态数据 当我取消时间间隔调用或重新加载页面时！看起来不错：

当我用时间间隔刷新它并用鼠标移动时，似乎它在每次调用时都会绘制另一层。

我已经尝试过绘制一次并删除并设置新数据，但在鼠标悬停时仍然会发疯。

var canvas = document.getElementById('modular-doughnut');
var context = canvas.getContext('2d');
context.clearRect ( 0 , 0 , canvas.width, canvas.height );
var moduleDoughnut = new Chart(context).Doughnut(chart_data, config);

修改 感谢@Koogle我可以说问题出在工具提示中。

如何解决？

Answer 1

要使用相同的画布，您必须清除它的引用。 Charts.js声明必须使用.destroy（）来清除对画布的所有引用。

您在此处阅读：Charts.js .destroy()

我在一些动态图表中遇到了同样的问题，所以我发现在画布周围创建一个div更容易，使用jquery $（＆＃34; #divID＆＃34;）清除div。空（） ，然后附加新画布。