javascript - 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 对象。

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

一般来说，如果我单击 10 个不同的过程，并将鼠标悬停在图形上，我会看到所有 10 个图形彼此交替。如果我设法找到图形变化的位置，那么只要我将指针留在该位置，它就会一直保持变化。

我当然希望使数据(和图形)保持不变，并且相对于我单击的最后一个过程。

如何解决这个奇怪的问题？我错过了什么吗？我是这个库的新手。

Answer 1

您可能对 this post 感兴趣。您需要在 makeGrafico 函数开始时清除 Canvas 。

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

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