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()。如果它不起作用，您应该考虑删除canvas元素，然后再次创建它：

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

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

1 个答案: