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

您可能对this post 感兴趣。您需要在 makeGrafico 函数的开头清除画布。

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

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