ChartJs鼠标悬停bug（显示以前的图表）

Question

我认为我的问题是一个已知的问题，每次我制作一个新的图表，并将鼠标悬停在画布上的一些点上，旧的图表总是会闪进闪出。这是我试图修复它的一个线程，但似乎没有任何效果。我试图重新添加画布，使用破坏，清除，如果语句应该清除它，但什么都没有。

这是我的代码：

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: chartjsDate,
        datasets: [{
            label: 'temp',
            data: chartjsTemp,
            backgroundColor: "rgba(240,240,240,0.5)"
        }]
    }
});

我尝试添加myChart.destroy（） 在该代码之前和之后，即使是if（myChart！=null）{myChart.destroy（）；}，但仍然是空的。任何关于如何修复的帮助都将不胜感激。我发现的所有其他线程都很旧，它们的解决方案都不起作用。

编辑：我试过一些东西，但没有用：

var myChart;
if (myChart != undefined || myChart !=null) {
    myChart.destroy();
}




Answer 1

以上解决方案为我工作，但当我在同一页上有两个图表时，只有一个显示。其他图表正变得空空如也。这是解决办法。

  var ctx = document.getElementById("bar-chart").getContext("2d");  

  //Destroy the previous chart;
  //Rename the "bar" according to your component
  if(window.bar != undefined)
  window.bar.destroy();
  window.bar = new Chart(ctx , {});

如果不更改“条形图”，页面中只会显示一个图表。

Answer 2

我也有这个问题。要解决这个问题，你首先必须声明myChart变量全局，然后尝试这种方式。

//var my chart declare globally.  
let chartData = {
        type: 'line',
        data: {
            labels: chartjsDate,
            datasets: [{
                label: 'temp',
                data: chartjsTemp,
                backgroundColor: "rgba(240,240,240,0.5)"
            }]
        }
        if (typeof(this.myChart) != "undefined") {
            this.myChart.destroy();
        }

        const ctx = this.renderRoot.querySelector('#chart-canvas').getContext('2d');
        this.myChart = new Chart(ctx, chartData);
        this.myChart.update();

Answer 3

解决了的！我在javascript代码上方添加了以下内容：

var button = document.getElementById("submitButton");
submitButton.addEventListener("click", function(){
    myChart.destroy();
});

并将我的提交按钮更改为id为“submitButton”，如下所示：

<input type="submit" class="btn btn-danger" id="submitButton" value="Send" />

这样，每次你按下提交按钮，它就会破坏之前的图表。奇怪的是，当试图使用myChart.destroy（）；我得到了错误。