javascript - Charts.js donut

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

为了使用相同的 Canvas ，您必须清除对其的引用。 Charts.js 声明您必须使用 .destroy() 清除对 Canvas 的所有引用。

您在这里阅读:Charts.js .destroy()

我在制作的一些动态图表中遇到了同样的问题，因此我发现在 Canvas 周围创建一个 div，使用 jquery $("#divID").empty() 清除 div，然后附加新 Canvas 。