Визуализация данных временных рядов с использованием JSON - PullRequest
Новая
       40

Визуализация данных временных рядов с использованием JSON

0 голосов
/ 06 апреля 2020

Я использую 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>

Как мне go о создании временного ряда диаграммы, который показывает активные случаи.

1 Ответ

0 голосов
/ 06 апреля 2020

Ниже приведенный фрагмент кода демонстрирует, как это можно сделать. 

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

fetch("https://pomber.github.io/covid19/timeseries.json")
  .then(response => response.json())
  .then(data=> {
    data["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>
...