Данные API не загружаются в диаграмму. js, пока элемент не будет проверен или размер страницы не изменится. - PullRequest
Новая
       21

Данные API не загружаются в диаграмму. js, пока элемент не будет проверен или размер страницы не изменится.

1 голос
/ 05 апреля 2020

Я использую Chart. js и этот API для создания линейного графика случаев ковид-19 в Австралии. Однако данные API не загружаются в диаграмму, пока я не выполню что-то вроде проверки элемента на странице или изменения размера окна.

Вот мой файл JS: 

window.onload = function() {
   let dates = [];
   let confirmedCases = [];
   let confirmedRecovered = [];
   let confirmedDeaths = [];

   function addArrayFunc(date, confirmed, recovered, deaths) {
      dates.push(date);
      confirmedCases.push(confirmed);
      confirmedRecovered.push(recovered);
      confirmedDeaths.push(deaths);
   }
   fetch("https://pomber.github.io/covid19/timeseries.json")
      .then(response => response.json())
      .then(cases => {
         cases["Australia"].forEach(({
               date,
               confirmed,
               recovered,
               deaths
            }) =>
            addArrayFunc(date, confirmed, recovered, deaths)
         )
      })

   const ctx = document.getElementById('myChart').getContext('2d');
   new Chart(ctx, {
      type: 'line',
      data: {
         labels: dates,
         datasets: [{
               label: 'Confirmed',
               borderColor: 'pink',
               backgroundColor: 'pink',
               fill: 'false',
               data: confirmedCases
            },
            {
               label: 'Recovered',
               borderColor: 'blue',
               backgroundColor: 'blue',
               fill: 'false',
               data: confirmedRecovered
            },
            {
               label: 'Deaths',
               borderColor: 'green',
               backgroundColor: 'green',
               fill: 'false',
               data: confirmedDeaths
            }
         ]
      },
      options: {
         responsive: true,
         title: {
            display: true,
            text: 'Covid-19 Cases in Australia'
         },
      }
   });
}

Вот мой html файл: 

<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Confirmed Covid-19 cases in Australia</title>
      <style>
         canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            width: 75%;
         }
      </style>
      <script src="script.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
   </head>
   <body>
      <canvas id="myChart"></canvas>
   </body>
</html>

Я считаю, что я создаю диаграмму до того, как данные поступили с URL, но я понятия не имею, имею ли чтобы исправить это. async/await или watch это может исправить? Как бы я go реализовал это?

Любая помощь будет принята с благодарностью.

1 Ответ

2 голосов
/ 05 апреля 2020

Поскольку fetch выполняет асинхронный вызов, вам необходимо создать диаграмму после получения ответа. Поэтому просто поместите код создания диаграммы внутрь .then, и он будет работать, как показано ниже. 

window.onload = function() {
  let dates = [];
  let confirmedCases = [];
  let confirmedRecovered = [];
  let confirmedDeaths = [];

  function addArrayFunc(date, confirmed, recovered, deaths) {
    dates.push(date);
    confirmedCases.push(confirmed);
    confirmedRecovered.push(recovered);
    confirmedDeaths.push(deaths);
  }

  fetch("https://pomber.github.io/covid19/timeseries.json")
    .then(response => response.json())
    .then(cases => {
      cases["Australia"].forEach(({
          date,
          confirmed,
          recovered,
          deaths
        }) =>
        addArrayFunc(date, confirmed, recovered, deaths)
      )
      new Chart(document.getElementById('myChart'), {
        type: 'line',
        data: {
          labels: dates,
          datasets: [{
              label: 'Confirmed',
              borderColor: 'pink',
              backgroundColor: 'pink',
              fill: 'false',
              data: confirmedCases
            },
            {
              label: 'Recovered',
              borderColor: 'blue',
              backgroundColor: 'blue',
              fill: 'false',
              data: confirmedRecovered
            },
            {
              label: 'Deaths',
              borderColor: 'green',
              backgroundColor: 'green',
              fill: 'false',
              data: confirmedDeaths
            }
          ]
        },
        options: {
          responsive: true,
          title: {
            display: true,
            text: 'Covid-19 Cases in Australia'
          },
        }
      });
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>
...