API 数据未加载到 chart.js 中，直到检查元素或调整页面大小

Question

我正在使用 Chart.js and this API 创建澳大利亚 covid-19 病例的折线图。但是，在我执行诸如检查页面上的元素或调整 window.

大小之类的操作之前，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 可以解决的问题吗？我将如何实施它？

如有任何帮助，我们将不胜感激。

Answer 1

由于 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>

API 数据未加载到 chart.js 中，直到检查元素或调整页面大小

API data not loading in chart.js until element is inspected or page is resized

javascript

api

watch

async-await

chart.js