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

Question

我在超文本标记语言页面中包含了一个堆叠条形图（带有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

你可能对这篇文章感兴趣。您需要在＜code＞makeGrafico

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

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