将光标悬停在chart.js中的图表上时，会显示具有以前数据的图表

Question

我有一个天气网站，你可以输入城市的名字，它会显示来自OpenWeatherAPI的天气数据。我也有一个使用Chart.js制作的图表。但是有一个问题，当我搜索其他城市时，图表会更新，但是当我将光标悬停在一些点上时，每次鼠标悬停时，都会突然出现以前的图表，而不是当前的图表。在更新图表之前，我尝试使用update()和destroy()方法，但似乎没有帮助。

我在一个名为chartContainer的div中有一个canvas对象，它是chartcontiner div的唯一子对象。

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: arrayDates,
        datasets: [
            {
                borderColor: '#69CDE6',
                backgroundColor: 'rgba(12, 176, 216, 0.1)',
                data: arrayTemps
            }
        ]
    },
    options:{
        title: {
            display: true,
            text: `Prognoza pogody dla ${citynCountry}`,
            fontSize: 16,
            fontStyle: 'bold'
        },
        legend: {
            display: false,
        },
        scales:{
            yAxes:[{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Temperatura w °C',
                    fontSize: 16
                },
                ticks: {
                    fontSize: 17
                }
            }],
            xAxes:[{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Data i godzina',
                    fontSize: 16
                },
                ticks: {
                    fontSize: 17
                }
            }]

        }
    }

});
myChart.update();

Answer 1

看起来好像每次数据改变时，你都在同一个< code >画布中创建新的图表。您最好只创建一次图表，然后在其他城市的数据可用时更新其< code>data.labels 、< code>data.datasets.data和< code>options.title。更新完所有< code >数据和< code >选项后，您需要调用< code>myChart.update()。

请查看以下涉及类似问题的答案：

• https://stackoverflow.com/a/61025107/2358409
• https://stackoverflow.com/a/61576710/2358409