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

Question

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

我在一个名为chartContainer的div中有一个画布对象，它是chartContainerdiv的唯一子对象

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

每次数据更改时，我都会在同一canvas中创建新的图表。您最好只创建一次图表，然后在每次其他城市的数据可用时更新其data.labels、data.datasets.data和options.title。在所有data和options更新后，您需要调用myChart.update()。

请查看以下处理类似问题的答案：

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