使用JSON的时间序列数据可视化

Question

Iam使用https://pomber.github.io/covid19/timeseries.json检索要显示在特定国家（例如南非）的时间序列图中的数据。>>

<script>
fetch("https://pomber.github.io/covid19/timeseries.json")
  .then(response => response.json())
  .then(data => {
    data["South Africa"].forEach(({ date, confirmed, recovered, deaths }) =>
      console.log(`${date} active cases: ${confirmed - recovered - deaths}`)



    );
  });
</script>
我如何创建一个显示活动案例的图表时间序列。 

我使用https://pomber.github.io/covid19/timeseries.json检索要显示在特定国家（例如南非）的时间序列图中的数据。

下面的可运行代码段说明了如何完成此操作。

let dates = [];
let confirmed = [];
let recovered = [];
let deaths = [];

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

Answer 1

下面的可运行代码段说明了如何完成此操作。