Javascript 正在尝试销毁画布上的上一个图形

我正在同一画布上创建多个图形，但无法成功使用destroy（）API清理以前的数据

这是我创建图表的JS代码

const getCountryDataByMonth = async (country) => {
document.getElementById('casesGraphHeader').innerHTML = "Loading....";
const response = await fetch ('https://cors-anywhere.herokuapp.com/https://pomber.github.io/covid19/timeseries.json');
const data = await response.json();

const reports = await data[country];
var i;
var dateList = [];
var caseByDay = [];
var deathsByDay = [];

for(i = 0; i < reports.length; i++){
  dateList.push(reports[i].date);
  caseByDay.push(reports[i].confirmed);
  deathsByDay.push(reports[i].deaths);
}
//GRAPH FOR TOTAL CASES
var casesOptions = {
  type: 'bar',
  data: {
    labels: dateList,
    datasets: [
        {
          label: 'Total Cases',
          data: caseByDay,
        backgroundColor: '#f49d12',
        borderColor: '#f49d12',
        fill: false,
        borderWidth: 2
        }
        ]
  },
  options: {
    legend: {
         labels: {
             fontSize: 15
         }
     },
    scales: {
        yAxes: [{
        ticks: {
                    reverse: false,
          fontSize: 15
        }
      }],
      xAxes: [{
        ticks: {
          fontSize: 15
        }
      }],
    }
  }
}

var totalCasesChart = document.getElementById('totalCasesContainer').getContext('2d');
new Chart(totalCasesChart, casesOptions);
document.getElementById('casesGraphHeader').innerHTML = "Total Cases for "+country;


//GRAPH FOR TOTAL Deaths
var deathOptions = {
  type: 'bar',
  data: {
    labels: dateList,
    datasets: [
        {
          label: 'Total Deaths',
          data: deathsByDay,
        backgroundColor: '#e84c3d',
        borderColor: '#e84c3d',
        fill: false,
        borderWidth: 2
        }
        ]
  },
  options: {
    legend: {
         labels: {
             fontSize: 15
         }
     },
    scales: {
        yAxes: [{
        ticks: {
                    reverse: false,
          fontSize: 15
        }
      }],
      xAxes: [{
        ticks: {
          fontSize: 15
        }
      }],
    }
  }
}


var totalCasesChart = document.getElementById('totalDeathsContainer').getContext('2d');
new Chart(totalDeathsContainer, deathOptions);
document.getElementById('deathsGraphHeader').innerHTML = "Total Deaths for "+country;

};

function renderChart(){
  getCountryDataByMonth(document.getElementById('myInput').value);
}


function defaultChart() {
    getCountryDataByMonth('US');
}
window.onload = defaultChart;

---

然而，这是行不通的。在my中，您可以尝试键入China，然后单击以创建图形，然后键入Italy。然后将鼠标悬停在意大利图表上，您将看到中国的统计数据出现在图表上。

您的代码充满了问题，下面是我看到的一些内容：

---

查看您在创建新图表时正在执行的操作：

var totalCasesChart = document.getElementById('totalCasesContainer').getContext('2d');
var caseBar = new Chart(totalCasesChart, casesOptions);
document.getElementById('casesGraphHeader').innerHTML = "Total Cases for " + country;

vs

---

您正在呼叫：

wait-fetch（'https://cors-anywhere.herokuapp.com/https://pomber.github.io/...');

一次又一次当你只需要做一次的时候


在
getCountryDataByMonth
中，有许多变量应该是全局的，以减少您在
getCountryDataByMonth
中所做的操作，一个完美的例子是
TotalCaseShart
和
caseBar


我在这里对您的代码做了一些调整：

很难回答（你的小提琴坏了）。可能运行
update（）
。示例：@EzraSiton是的，这似乎是因为api说了太多的请求，但在我的本地机器中，它正在工作。我将如何根据我的代码集成更新？如果（caseBar）{caseBar.update（）}？？？@EzraSiton我的小提琴现在正在工作，我该如何调用它呢？您是否建议我将json存储在本地？我之所以每次都叫它是因为它会被更新。。。你还可以帮我解决这个问题吗？@Dinero这里有个解决办法：你应该把它作为一个答案发布，这样将来的读者可能会受益，或者至少可以添加到这个答案帖子的链接。@Dinero，是的，我编辑了答案。。。但这是非常具体的你正在做什么我怀疑很多其他人会受益。。。你提到的另一件事：我每次都叫它是因为它得到更新，它多久更新一次？我们可以添加一个setInterval，每5分钟调用一次
getCountriesList
？我们正在查看数据源：
一天更新三次
，如果您想看到新数据，只需手动刷新页面，我不认为每隔5分钟调用
getCountriesList
的setInterval是必要的
var totalCasesChart = document.getElementById('totalCasesContainer').getContext('2d');
var caseBar = new Chart(totalCasesChart, casesOptions);
document.getElementById('casesGraphHeader').innerHTML = "Total Cases for " + country;

 var totalCasesChart = document.getElementById('totalDeathsContainer').getContext('2d');
 new Chart(totalDeathsContainer, deathOptions);
 document.getElementById('deathsGraphHeader').innerHTML = "Total Deaths for " + country;