ChartJs鼠标悬停错误（显示以前的图表） [英] ChartJs mouse hover bug (showing previous charts)

问题描述

我认为我的问题是已知的，每当我制作一张新图表并将鼠标悬停在画布上的某些点上时，旧图表就一直闪烁着。 这里是其中一个线程似乎有效。我尝试重新添加画布，使用destroy，clear，if语句应该将其清除，但是什么也没有。

I think my issue is a known one, everytime I make a new chart and hover my mouse over some points in the canvas, the old charts flash in and out all the time. Here's one of the threads I followed to try and fix it, but nothing seems to work. I tried re-appending the canvas, using destroy, clear, if statements which should clear it, but nothing.

这是我的代码：

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（）;} ，但还是没有。任何有关如何解决它的帮助将不胜感激。我发现的所有其他线程都已经很老了，它们的解决方案也不起作用。

I tried adding myChart.destroy(); before and after that code, even if(myChart!=null){myChart.destroy();}, but still nothing. Any help on how to fix it would be appreciated. All other threads I found are quite old and their solutions don't work.

编辑：我尝试了一些方法，但无济于事：

Some stuff I tried, to no avail:

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

推荐答案

已解决！我在javascript代码上方添加了此代码：

Solved! I added this above the javascript code:

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

然后将我的提交按钮更改为id为 submitButton，如下所示：

And changed my submit button to have the id "submitButton", like this:

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

这样，每当您按下提交按钮时，它都会破坏上一个图表。奇怪的是，当尝试使用 myChart.destroy（）; 时出现错误。

This way, everytime you press the submit button, it destroys the previous chart. The weird thing is that when trying to use myChart.destroy(); I got errors.

这篇关于ChartJs鼠标悬停错误（显示以前的图表）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！