пытаясь уничтожить предыдущий граф на холсте - PullRequest
Новая
       12

пытаясь уничтожить предыдущий граф на холсте

1 голос
/ 22 марта 2020

Я создаю несколько графиков на одном и том же холсте, но не могу успешно использовать API destroy () для очистки предыдущих данных.

ЗДЕСЬ МОЙ JS КОД ДЛЯ СОЗДАНИЯ A Диаграмма 

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 вы можете попытаться ввести Китай, сначала нажмите, чтобы создать график, а затем введите Италию. Затем НАЖИМАЙТЕ над графиком Италии, и вы увидите, что статистика из Китая появится на графике.

1 Ответ

2 голосов
/ 22 марта 2020

Ваш код озадачен проблемами, вот некоторые вещи, которые я вижу:

Посмотрите, что вы делаете, когда создаете новые диаграммы: 

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/...');
, когда вам нужно сделать это только один раз ...

Там Есть много переменных, которые должны быть глобальными, чтобы уменьшить то, что вы делаете в getCountryDataByMonth. Прекрасным примером являются totalCasesChart и caseBar

. Я внес несколько изменений в ваш код:
https://raw.githack.com/heldersepu/hs-scripts/master/HTML/chart_test.html

...