时间戳

首页 > 解决方案 > 谁能帮我将 Axios JSON 响应中的数据移动到 Chart js 折线图上的绘图点？

javascript - 谁能帮我将 Axios JSON 响应中的数据移动到 Chart js 折线图上的绘图点？

问题描述

我正在构建一个 React 应用程序，其中包含一个折线图，表示从某个时间点到现在的数据记录时间线。我正在使用 JS 库 Chart js。特别是“react-chartjs-2”插件。我正在使用以下 API 的“/历史/全部”路径：

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

我成功地从 Axios GET 请求中检索到响应。但是，当涉及到我一直在遵循以构建应用程序的实现时，返回给我的 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;

  }
}

图表.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;

标签： javascriptjsonreactjsaxios

解决方案

首先提取 x 标签：

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

然后提取每个系列的 y 值：

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
       }]
     }    
/>

推荐阅读