Javascript 使用reactjs获取API并显示到图形中

我试图从中获取城市名称及其各自的温度，然后将其显示在图表中。那么，如何获取所有城市的名称并将其设置为图形代码中的标签呢？下面是我的代码。我是新手。因此，任何形式的帮助都是非常合适的

import React, { Component } from "react";
import axios from "axios";
import { Line } from "react-chartjs-2";
class Chart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      chartData: {},
      areas: [],
      temperature: [],
      all: {}
    };
  }
  componentDidMount() {
    axios
      .get("https://api.data.gov.sg/v1/environment/air-temperature")
      .then(res =>
        this.setState({
          all: res.data,
          areas: res.data.metadata.stations,
          temperature: res.data.items[0].readings
        })
      )
      .catch(err => console.log(err));
    this.getChartData();
  }
  getChartData() {
    console.log("length", this.state.areas);
    // Ajax calls here
    this.setState({
      chartData: {
        labels: [
          "Boston",
          "Worcester",
          "Springfield",
          "Lowell",
          "Cambridge",
          "New Bedford"
        ],
        datasets: [
          {
            label: "Population",
            data: [617594, 181045, 153060, 106519, 105162, 95072],
            backgroundColor: [
              "rgba(255, 99, 132, 0.6)",
              "rgba(54, 162, 235, 0.6)",
              "rgba(255, 206, 86, 0.6)",
              "rgba(75, 192, 192, 0.6)",
              "rgba(153, 102, 255, 0.6)",
              "rgba(255, 159, 64, 0.6)",
              "rgba(255, 99, 132, 0.6)"
            ]
          }
        ]
      }
    });
  }
  render() {
    //console.log(this.state.areas);
    return (
      <div style={{ position: "relative", width: 500, height: 500 }}>
        <h1>Chart</h1>
        <Line data={this.state.chartData} />
      </div>
    );
  }
}

export default Chart;

import React，{Component}来自“React”；
从“axios”导入axios；
从“react-chartjs-2”导入{Line}；
类图扩展组件{
建造师（道具）{
超级（道具）；
此.state={
图表数据：{}，
地区：[]，
温度：[]，
全部：{}
};
}
componentDidMount（）{
axios
.get（“https://api.data.gov.sg/v1/environment/air-temperature")
。然后（res=>
这是我的国家({
全部：资源数据，
区域：res.data.metadata.stations，
温度：res.data.items[0]。读数
})
)
.catch（err=>console.log（err））；
这是.getChartData（）；
}
getChartData（）{
console.log（“长度”，this.state.area）；
//Ajax在这里调用
这是我的国家({
图表数据：{
标签：[
“波士顿”，
“伍斯特”，
“斯普林菲尔德”，
“洛厄尔”，
“剑桥”，
“新贝德福德”
],
数据集：[
{
标签：“人口”，
数据：[61759418104515306010651910516295072]，
背景颜色：[
"rgba(255,99,132,0.6),，
“rgba（54162235,0.6）”，
“rgba（255、206、86、0.6）”，
“rgba（751921920.6）”，
“rgba（153102255,0.6）”，
“rgba（255、159、64、0.6）”，
rgba（255、99、132、0.6）
]
}
]
}
});
}
render（）{
//console.log（this.state.areas）；
返回(
图表
);
}
}
导出默认图表；

您可以使用

区域

数组的

映射

方法来迭代

区域

中的元素，并获取每个元素的名称

例如（数据取自，特别是

data.metadata.stations

）：

const区域=[
{id:'S117'，
设备id:'S117'，
名称：'榕树路'，
地点：{纬度：1.256，经度：103.679}，
{id:'S50'，
设备id:“S50”，
名称：“克莱门蒂路”，
地点：{纬度：1.3337，经度：103.7768}，
{id:'S107'，
设备标识：“S107”，
名称：“东海岸公园路”，
地点：{纬度：1.3135，经度：103.9625}，
]
const areaNames=areas.map（e=>e.name）；

带

区域名称的结果

：

[‘榕树路’、‘克莱门蒂路’、‘东海岸公园路’]

您可以使用

区域

数组的

映射

方法来迭代

区域

中的元素，并获取每个元素的名称

例如（数据取自，特别是

data.metadata.stations

）：

const区域=[
{id:'S117'，
设备id:'S117'，
名称：'榕树路'，
地点：{纬度：1.256，经度：103.679}，
{id:'S50'，
设备id:“S50”，
名称：“克莱门蒂路”，
地点：{纬度：1.3337，经度：103.7768}，
{id:'S107'，
设备标识：“S107”，
名称：“东海岸公园路”，
地点：{纬度：1.3135，经度：103.9625}，
]
const areaNames=areas.map（e=>e.name）；

带

区域名称的结果

：

[‘榕树路’、‘克莱门蒂路’、‘东海岸公园路’]

即使数据不是来自后端，也会调用getChartData（）函数 所以，保持一个旗帜抓取 如果这是真的 从函数返回，不显示图表 当fetching为false且fetched为true时显示它

即使数据未来自后端，也会调用getChartData（）函数

class Chart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      chartData: {}
    };
  }

  componentDidMount() {
    axios
      .get("https://api.data.gov.sg/v1/environment/air-temperature")
      .then(res =>{
        this.getChartData(res.data);
      })
      .catch(err => console.log(err));

  }
  getChartData( data) {
    const cityNames = data.metadata.stations.reduce((acc,cur) => [...acc,cur.name],[]);
    const temperatures = data.items[0].readings.reduce((acc,cur) => [...acc,cur.value],[])
    this.setState({
      ...this.state,
      chartData: {
        labels: cityNames,
        datasets: [
          {
            label: "Population",
            data: temperatures,
            backgroundColor: [
              "rgba(255, 99, 132, 0.6)",
              "rgba(54, 162, 235, 0.6)",
              "rgba(255, 206, 86, 0.6)",
              "rgba(75, 192, 192, 0.6)",
              "rgba(153, 102, 255, 0.6)",
              "rgba(255, 159, 64, 0.6)",
              "rgba(255, 99, 132, 0.6)"
            ]
          }
        ]
      }
    });
  }

  render() {
    //console.log(this.state.areas);
    return (
      <div style={{ position: "relative", width: 500, height: 500 }}>
        <h1>Chart</h1>
        <Line data={this.state.chartData} />
      </div>
    );
  }
}

export default Chart;

所以，保持一个旗帜抓取 如果这是真的 从函数返回，不显示图表 当取数为false且取数为true时显示它

类图扩展组件{
class Chart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      chartData: {}
    };
  }

  componentDidMount() {
    axios
      .get("https://api.data.gov.sg/v1/environment/air-temperature")
      .then(res =>{
        this.getChartData(res.data);
      })
      .catch(err => console.log(err));

  }
  getChartData( data) {
    const cityNames = data.metadata.stations.reduce((acc,cur) => [...acc,cur.name],[]);
    const temperatures = data.items[0].readings.reduce((acc,cur) => [...acc,cur.value],[])
    this.setState({
      ...this.state,
      chartData: {
        labels: cityNames,
        datasets: [
          {
            label: "Population",
            data: temperatures,
            backgroundColor: [
              "rgba(255, 99, 132, 0.6)",
              "rgba(54, 162, 235, 0.6)",
              "rgba(255, 206, 86, 0.6)",
              "rgba(75, 192, 192, 0.6)",
              "rgba(153, 102, 255, 0.6)",
              "rgba(255, 159, 64, 0.6)",
              "rgba(255, 99, 132, 0.6)"
            ]
          }
        ]
      }
    });
  }

  render() {
    //console.log(this.state.areas);
    return (
      <div style={{ position: "relative", width: 500, height: 500 }}>
        <h1>Chart</h1>
        <Line data={this.state.chartData} />
      </div>
    );
  }
}

export default Chart;

建造师（道具）{
超级（道具）；
此.state={
图表数据：{}
};
}
componentDidMount（）{
axios
.get（“https://api.data.gov.sg/v1/environment/air-temperature")
。然后（res=>{
这个.getChartData（res.data）；
})
.catch（err=>console.log（err））；
}
getChartData（数据）{
const cityNames=data.metadata.stations.reduce（（acc，cur）=>[…acc，cur.name]）；
常数温度=数据项[0]。读数。减少（（acc，cur）=>[…acc，cur.value]，）
这是我的国家({
…这个州，
图表数据：{
标签：cityNames，
数据集：[
{
标签：“人口”，
数据：温度，
背景颜色：[
"rgba(255,99,132,0.6),，
“rgba（54162235,0.6）”，
“rgba（255、206、86、0.6）”，
“rgba（751921920.6）”，
“rgba（153102255,0.6）”，
“rgba（255、159、64、0.6）”，
rgba（255、99、132、0.6）
]
}
]
}
});
}
render（）{
//console.log（this.state.areas）；
返回(
图表
);
}
}
导出默认图表；

类图表扩展组件{
建造师（道具）{
超级（道具）；
此.state={
图表数据：{}
};
}
componentDidMount（）{
axios
.get（“https://api.data.gov.sg/v1/environment/air-temperature")
。然后（res=>{
这个.getChartData（res.data）；
})
.catch（err=>console.log（err））；
}
getChartData（数据）{
const cityNames=data.metadata.stations.reduce（（acc，cur）=>[…acc，cur.name]）；
常数温度=数据项[0]。读数。减少（（acc，cur）=>[…acc，cur.value]，）
这是我的国家({
…这个州，
图表数据：{
标签：cityNames，
数据集：[
{
标签：“人口”，
数据：温度，
背景颜色：[