试图破坏画布上的先前图形

Question

我正在同一画布上创建多个图形，但是我无法成功使用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;

这是我尝试过的。我基本上做到了

if(caseBar){
 caseBar.destroy();
}

但是，这不起作用。在我的FIDDLE中，您可以尝试首先键入China来创建图形，然后键入Italy。然后将鼠标悬停在意大利图表上，您会看到来自中国的统计信息出现在图表上。

Answer 1

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

查看创建新图表时的工作：

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

vs

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

您正在呼叫：await fetch('https://cors-anywhere.herokuapp.com/https://pomber.github.io/...');一次又一次地应该只做一次...