Chart.js条形图的奇怪问题，图像散射

Question

我在HTML页面中包含了一个堆叠条形图(带有Chart.js库)，它可以让用户可视化一些数据。这些数据随着用户的选择而变化，启用onclick功能的Javascript函数是：

function aggLav(){
[...]
for(i=2; i<src.rows.length-1; i++){
cells[i]=row.insertCell(j);
cells[i].onclick = function () {//load graphic
dati=createData();                  
makeGrafico(dati, this.innerHTML);                  
var gr=document.getElementById("canvas");               
if($(gr).is(':hidden')) $(gr).slideToggle();
};
}

函数createData创建JSON对象(带有标签和数据集)以传递给图形(工作正常)，函数makeGrafico():

function makeGrafico(dati, titolo){
var d=getFirstMonday();
var mondays=[]; 
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: dati,
options: {
title:{
display:true,
text:titolo//change to name of procedure
},
tooltips: {
mode: 'label'
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
}

采用参数的名称以显示它，以及上一个函数的JSON对象。

当我第一次点击一个过程时(带有onclick功能的单元格代表工业过程，不相关)，一切都很好，图形向上滑动并显示正确的结果。但当我点击另一个过程时，我希望看到与该过程相关的图形：这是真的，但当我在图像上移动鼠标时，图形突然发生了变化，让我看到了我点击的第一个过程的数据。

一般来说，如果我点击10个不同的过程，并将鼠标悬停在图形上，我会看到所有10个图形相互交替。如果我设法找到图形变化的位置，那么在我把指针留在那个位置的所有时间里，它都是变化的。

我当然想让数据(和图形)持久化，并相对于我点击的最后一个过程。

如何解决这个奇怪的问题？我是不是错过了什么？我是这个图书馆的新手。

Answer 1

您可能对这篇文章感兴趣。您需要在makeGrafico函数开始时清除画布。

第一次，您应该尝试添加window.myBar.destroy()。如果它不起作用，您应该考虑删除画布元素，然后重新创建它：

var $parent = $('#canvas').parent();
$('#canvas').remove();
$parent.append('<canvas id="canvas"></canvas>');