为什么我的 API 中的数据没有显示在 React 中的 chart.js 图表上？

Question

我正在 React 中制作一个 SPA，它在 chart.js 图表中显示来自碳强度 API 的数据，可在此处找到：https://carbon-intensity.github.io/api-definitions/?shell#get-intensity-from-to .

我已经能够使用 axios 从 API 获取数据，并且在我检查控制台时可以看到这一点，但是当您在控制台中检查它时，它只是在 NaN 中解析所有数据：

我将 post 下面的所有相关代码，我想要的输出是 API 中的数据显示在折线图上。

Chart3.js

import React, { useState, useEffect } from "react";
import { Line } from "react-chartjs-2";
import axios from "axios";

const Chart3 = () => {
  const [chartData, setChartData] = useState({});
  const [Forecast, setForecast] = useState([]);
  const [Actual, setActual] = useState([]);

  const chart = () => {
    let Fore = [];
    let Act = [];


    axios
      .get('https://api.carbonintensity.org.uk/intensity/2020-08-25T15:30Z/2020-09-10T17:00Z')
      .then(res => {
        console.log(res);
        for (const dataObj of res.data.data) {
          Fore.push(parseInt(dataObj.forecast));
          Act.push(parseInt(dataObj.actual));
        }
        setChartData({
          labels: Fore,
          datasets: [
            {
              label: "Forestreet",
              data: Act,
              backgroundColor: ["rgba(75, 192, 192, 0.6)"],
              borderWidth: 4
            }
          ]
        });
      })
      .catch(err => {
        console.log(err);
      });
    console.log(Fore, Act);
  };

  useEffect(() => {
    chart();
  }, []);
  return (
    <div className="App">
      <h1>Dankmemes</h1>
      <div style={{height:"500px", width:"500px"}}>
        <Line
          data={chartData}
          options={{
            responsive: true,
            title: { text: "ForeStreet", display: true },
            scales: {
              yAxes: [
                {
                  ticks: {
                    autoSkip: true,
                    maxTicksLimit: 10,
                    beginAtZero: true
                  },
                  gridLines: {
                    display: false
                  }
                }
              ],
              xAxes: [
                {
                  gridLines: {
                    display: false
                  }
                }
              ]
            }
          }}
        />
      </div>
    </div>
  );
};

export default Chart3;

App.js

import React from 'react';
import { BrowserRouter as Router} from 'react-router-dom';
import './App.css';
import Chart from './Components/Chart/Chart';
import Chart1 from './Components/Chart/Chart1';
import Chart2 from './Components/Chart/Chart2';
import Chart3 from './Components/Chart/Chart3';
import Footer from './Components/Footer/Footer';
import Header from './Components/Header/Header';
import Container from './Components/Hero/Hero';
import Hero from './Components/Hero/Hero';

function App() {
  return (
    <Router>
        <Header />
        <Chart3 />
        <Footer />
    </Router>
      
    
  );
}

export default App;

这是我的图表目前使用 API 数据时的样子：

Answer 1

你在 axios res 中的 dataObject 不正确，你忘记了强度。你的 Chart3.js 必须看起来像：

import axios from "axios";
import React, {useState, useEffect} from "react";
import { Line } from "react-chartjs-2";
const Chart3 = () => {
  const [chartData, setChartData] = useState({});
  const [Forecast, setForecast] = useState([]);
  const [Actual, setActual] = useState([]);

  const chart = () => {
    let Fore = [];
    let Act = [];


    axios
      .get('https://api.carbonintensity.org.uk/intensity/2020-08-25T15:30Z/2020-09-10T17:00Z')
      .then(res => {
        console.log(res);
        for (const dataObj of res.data.data) {
          Fore.push(parseInt(dataObj.intensity.forecast));
          Act.push(parseInt(dataObj.intensity.actual));
        }
        setChartData({
          labels: Fore,
          datasets: [
            {
              label: "Forestreet",
              data: Act,
              backgroundColor: ["rgba(75, 192, 192, 0.6)"],
              borderWidth: 4
            }
          ]
        });
      })
      .catch(err => {
        console.log(err);
      });
    console.log(Fore, Act);
  };

  useEffect(() => {
    chart();
  }, []);
  return (
    <div className="App">
      <h1>Dankmemes</h1>
      <div style={{height:"500px", width:"500px"}}>
        <Line
          data={chartData}
          options={{
            responsive: true,
            title: { text: "ForeStreet", display: true },
            scales: {
              yAxes: [
                {
                  ticks: {
                    autoSkip: true,
                    maxTicksLimit: 10,
                    beginAtZero: true
                  },
                  gridLines: {
                    display: false
                  }
                }
              ],
              xAxes: [
                {
                  gridLines: {
                    display: false
                  }
                }
              ]
            }
          }}
        />
      </div>
    </div>
  );
};

export default Chart3;

唯一的区别是数据对象： dataObj.intensity.forecast 而不是 dataObj.forecast sandBox

为什么我的 API 中的数据没有显示在 React 中的 chart.js 图表上？

Why is the data from my API not displaying on my chart.js chart in React?

api

nan

reactjs

chart.js

axios