图表.js出现故障并在悬停时恢复到以前的数据集

Question

我正在使用图表.js(https://www.chartjs.org(制作图表，但是当您将图表数据切换到新数据集并使用光标滚动图表后，它会出现故障并恢复到旧数据集。这是我的代码：

<li class="breadcrumb-item"><select id="cityselect" onchange="changeCity();">
<option value="la">Los Angeles</option>
<option value="oc">Orange County</option>
<option value="sf">San Francisco</option>
</select></li>
<div class="bottommargin divcenter" style="max-width: 90%; min-height: 350px;">
<canvas id="resChart"></canvas>
</div>
function changeCity(){
var ctx = document.getElementById('resChart');
var resChart = new Chart(ctx);
resChart.destroy();
getResChartData();
}
function getResChartData() {
var city = document.getElementById("cityselect").value;
$.ajax({
type: 'GET',
url: 'getreschart.php',
dataType: 'json',
data: {  city:city, },
success: function(response) {
//console.log (response);
function collate(d) {
return d.reduce(function(prev, cur, index) {
var ret = {};
for (var prop in cur) {
if (index === 0) {
ret[prop] = [];
} else {
ret[prop] = prev[prop];
}
ret[prop].push(cur[prop]);
}
return ret;
}, {});
}
var reduced = collate(response);
var ctx = document.getElementById('resChart').getContext('2d');
var resChart = new Chart(ctx, {
type: 'line',
data: {
labels: reduced.mmyy,
datasets: [{
label: 'Fulfilled Reservations',
data: reduced.fulfilledreservations,
backgroundColor: window.chartColors.orange,
borderColor: window.chartColors.orange,
fill: false
},
{
label: 'Unfulfilled Reservations',
data: reduced.unfulfilledreservations,
backgroundColor: window.chartColors.blue,
borderColor: window.chartColors.blue,
fill: false
},
{
label: 'All Reservations',
data: reduced.allreservations,
backgroundColor: window.chartColors.gray,
borderColor: window.chartColors.gray,
fill: false
}]
},
options: {
responsive: true,
elements: {
line: {
tension: 0 // disables bezier curves
}
}
}
});
}
});
}

如您所见，我已经销毁了图表并更新了它的属性(我认为( - 什么给了？

Answer 1

我们应该使用

if(myChart)
myChart.destroy() 

分配新数据集之前的方法，如以下链接中所述

ChartJs 折线图在悬停时重绘故障