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

Question

我认为我的问题是一个已知的问题，每当我制作一张新图表并将鼠标悬停在画布上的某些点上时，旧图表就一直闪烁着。这是我尝试修复的线程之一，但似乎没有任何效果。我试图重新附加画布，使用破坏，清晰，if语句这应该清除它，但没有什么。

这是我的代码：

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

我也有这个问题。要解决它，您首先必须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 2

以上解决方案对我有用，但是当我在同一页面上有两个图表时，只有一个显示。其他图表正在变空。这是解决方案。

  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 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();出现错误。