Может ли кто-нибудь помочь мне переместить данные из ответа Ax ios JSON на точки графика на линейном графике Chart js? - PullRequest
Новая
       8

Может ли кто-нибудь помочь мне переместить данные из ответа Ax ios JSON на точки графика на линейном графике Chart js?

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

Я работаю над созданием приложения React, которое содержит линейную диаграмму, представляющую временную шкалу записи данных с определенного момента времени до сегодняшнего дня. Я использую библиотеку JS Диаграмма js. В частности, плагин «act-chart js -2 ». Я использую «/ исторический / все» путь следующего API:

[https://corona.lmao.ninja/docs/?urls.primaryName=version%202.0.0# /] [1]

Я успешно получаю ответ от Топор ios ПОЛУЧИТЬ запрос. Но структурирование отправляемого мне JSON сбивает меня с толку, когда дело доходит до реализации, которой я следовал при создании приложения. У меня есть много строительных лесов, но я изо всех сил пытаюсь получить данные от функции запроса GET к линейному графику.

Данные отправляются в следующей структуре: 

{
    "cases": {
        "3/21/20": 304507,
        "3/22/20": 336953,
        "3/23/20": 378231,
        "3/24/20": 418041,
        "3/25/20": 467653,
        "3/26/20": 529591,
        "3/27/20": 593291,
        "3/28/20": 660693,
        "3/29/20": 720140,
        "3/30/20": 782389,
        "3/31/20": 857487,
        "4/1/20": 932605,
        "4/2/20": 1013466,
        "4/3/20": 1095917,
        "4/4/20": 1176060,
        "4/5/20": 1249754,
        "4/6/20": 1321481,
        "4/7/20": 1396476,
        "4/8/20": 1480202,
        "4/9/20": 1565278,
        "4/10/20": 1657526,
        "4/11/20": 1735650,
        "4/12/20": 1834721,
        "4/13/20": 1904838,
        "4/14/20": 1976191,
        "4/15/20": 2056054,
        "4/16/20": 2152437,
        "4/17/20": 2240190,
        "4/18/20": 2317758,
        "4/19/20": 2401378
    },
    "deaths": {
        "3/21/20": 12973,
        "3/22/20": 14651,
        "3/23/20": 16505,
        "3/24/20": 18625,
        "3/25/20": 21181,
        "3/26/20": 23970,
        "3/27/20": 27198,
        "3/28/20": 30652,
        "3/29/20": 33925,
        "3/30/20": 37582,
        "3/31/20": 42107,
        "4/1/20": 47180,
        "4/2/20": 52983,
        "4/3/20": 58787,
        "4/4/20": 64606,
        "4/5/20": 69374,
        "4/6/20": 74565,
        "4/7/20": 81937,
        "4/8/20": 88338,
        "4/9/20": 95521,
        "4/10/20": 102525,
        "4/11/20": 108502,
        "4/12/20": 114090,
        "4/13/20": 119481,
        "4/14/20": 125983,
        "4/15/20": 134176,
        "4/16/20": 143800,
        "4/17/20": 153821,
        "4/18/20": 159509,
        "4/19/20": 165043
    },
    "recovered": {
        "3/21/20": 91682,
        "3/22/20": 97889,
        "3/23/20": 98341,
        "3/24/20": 107890,
        "3/25/20": 113604,
        "3/26/20": 121966,
        "3/27/20": 130659,
        "3/28/20": 138949,
        "3/29/20": 148616,
        "3/30/20": 164100,
        "3/31/20": 176442,
        "4/1/20": 191853,
        "4/2/20": 208528,
        "4/3/20": 223621,
        "4/4/20": 243575,
        "4/5/20": 257000,
        "4/6/20": 273259,
        "4/7/20": 296263,
        "4/8/20": 324507,
        "4/9/20": 348813,
        "4/10/20": 370241,
        "4/11/20": 395521,
        "4/12/20": 414599,
        "4/13/20": 440897,
        "4/14/20": 466051,
        "4/15/20": 502053,
        "4/16/20": 532409,
        "4/17/20": 557798,
        "4/18/20": 581355,
        "4/19/20": 612056
    }
}

Я бы хотел, чтобы для каждой категории (случаи, случаи смерти, выздоровления) была представлена ​​линия на графике, показывающая прогрессию во времени , но я не уверен, как справиться с этим. Предполагается, что даты будут осью X, а точки будут отображаться разной цветной линией для каждого.

Кто-нибудь сможет помочь с этим вообще? Я был бы очень признателен за некоторые рекомендации. Ниже приведены два основных файла, соответствующих обработке Chart и API:

index. js

   export const fetchDailyData = async () => {



  try {
      const { data } = await axios.get(`${url}/historical/all`);

      const labels = Object.keys(data.cases);
      const cases = labels.map((name) => data.cases[name]);
      const deaths = labels.map((name) => data.deaths[name]);
      const recovered = labels.map((name) => data.recovered[name]);

      return {labels, cases, deaths, recovered};





  } catch (error) {
    return error;

  }
}

Chart.jsx 

    import React, { useState, useEffect } from 'react';
import { Line, Bar } from 'react-chartjs-2';
import { fetchDailyData } from '../../api';

import styles from './Chart.module.css';



const Chart = ({data: { labels, cases, deaths, recovered }}) => {
    const [dailyData, setDailyData] = useState([]);

    useEffect(() => {
        const fetchAPI = async () => {
            setDailyData(await fetchDailyData());
        }

        fetchAPI();
    }, []);





    const lineChart = (
        <Line data = {
            {
                labels,
                datasets: [{
                        data:cases,
                        label: 'Infected',
                        borderColor: '#3333ff',
                        fill: true,

                    }, {
                        data: deaths,
                        label: 'Deaths',
                        borderColor: 'red',
                        backgroundColor: 'rgba(255, 0, 0, 0.5)',
                        fill: true,
                    },
                    {
                        data: recovered,
                        label: 'Recovered',
                        borderColor: 'green',
                        backgroundColor: 'rgba(0, 255, 0, 0.5)',
                        fill: true,
                    }],
            }
        }



        />
    );

    return ( 
        <div className = { styles.container }> 
            {lineChart}
        </div>
    );
};

export default Chart;

Ответы [ 2 ]

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

Вот полное решение: 

// Create the chartData state
const [chartData, setChartData] = useState();

// in your fetch function, convert the data to chartData
const labels = Object.keys(data.cases);
const cases = labels.map((name) => data.cases[name]);
const deaths = labels.map((name) => data.deaths[name]);
const recovered = labels.map((name) => data.recovered[name]);
setChartData({
    labels,
    datasets: [{
        data: cases,
        label: 'Infected',
        borderColor: '#3333ff',
        fill: true
    }, {
        data: deaths,
        label: 'Deaths',
        borderColor: 'red',
        backgroundColor: 'rgba(255, 0, 0, 0.5)',
        fill: true
    }, {
        data: recovered,
        label: 'Recovered',
        borderColor: 'green',
        backgroundColor: 'rgba(0, 255, 0, 0.5)',
        fill: true
    }]
})

// Now render your chart (but make sure chartData exists)
return ( 
    <div className = { styles.container }> 
        {chartData &&
            <Line data={chartData} />
        }
    </div>
);
1 голос
/ 21 апреля 2020

Сначала извлеките метки x: 

const labels = Object.keys(dailyData.cases);

Затем извлеките значения y для каждого ser ie: 

const cases = Object.keys(dailyData.cases).map((name) => dailyData.cases[name]);
const deaths = Object.keys(dailyData.deaths).map((name) => dailyData.deaths[name]);
const recovered = Object.keys(dailyData.recovered).map((name) => dailyData.recovered[name]);

Затем соберите все в объект диаграммы js: 

<Line data = {
    labels,
    datasets: [{
        data: cases,
        label: 'Infected',
        borderColor: '#3333ff',
        fill: true
      }, {
         data: deaths,
         label: 'Deaths',
         borderColor: 'red',
         backgroundColor: 'rgba(255, 0, 0, 0.5)',
         fill: true
       }, {
         data: recovered,
         label: 'Recovered',
         borderColor: 'green',
         backgroundColor: 'rgba(0, 255, 0, 0.5)',
         fill: true
       }]
     }    
/>
...