如何使用API​​从Chart中获取数据并使用Chart.js和Angular 8创建图表？

Question

我是Angular 8的新手，我目前正在一个个人项目中，使用Chart.js在天气API上创建图表。我创建了一个名为天气的新组件。 这是API链接 https://samples.openweathermap.org/data/2.5/history/city?q=Warren,OH&appid=b6907d289e10d714a6e88b30761fae22

以下是从API获取的数据：

{ "message":"",
"cod":"200",
"city_id":2643743,
"calctime":0.0875,
"cnt":3,
"list": [
    { "main": { 
        "temp": 279.946, 
        "temp_min":279.946, 
        "temp_max":279.946, 
        "pressure":1016.76, 
        "sea_level":1024.45, 
        "grnd_level":1016.76, 
        "humidity":100
    }, // etc 

我的weather.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';

@Component({
  selector: 'app-weather',
  templateUrl: './weather.component.html',
  styleUrls: ['./weather.component.css']
})
export class WeatherComponent implements OnInit {

  weather:Object;
  constructor(private data: DataService) { }

  ngOnInit() 
  {
    this.data.getWeather().subscribe(data=>{
      this.weather=data;
      console.log(this.weather);
    });
  }

  public barChartOptions={
    scaleShowVerticalLines:false,
    responsive:true
  };
  public barChartLabels=[this.weather.list[0].main,this.weather.list[1].main,this.weather.list[2].main];
  public barChartType="bar";
  public barChartLegend="true";
  public barChartData=[
    {data:[this.weather.list[0].main.temp,this.weather.list[1].main.temp,this.weather.list[2].main.temp],label:'Temperature'},
    {data:[this.weather.list[0].main.pressure,this.weather.list[1].main.pressure,this.weather.list[2].main.pressure],label:'Pressure'},
    {data:[this.weather.list[0].main.sea_level,this.weather.list[1].main.sea_level,this.weather.list[2].main.sea_level],label:'Sea Level'}
  ];
}

我发现很难从API中提取各种数据元素。它们存在于API的列表数组中，我不确定如何获取数组的各个元素。 任何帮助将非常感激。谢谢。

Answer 1

您可以使用Array.prototype.map()：

public barChartLabels = this.weather.list.map(item => item.main);

public barChartData = [
    {
        data: this.weather.list.map(item => item.main.temp),
        label: 'Temperature',
    },
    {
        data: this.weather.list.map(item => item.main.pressure),
        label: 'Pressure',
    },
    {
        data: this.weather.list.map(item => item.main.sea_level),
        label: 'Sea Level'
    },
];

如果仅使用list的{​​{1}}属性，则可以更改此分配：

data

收件人：

this.weather = data

并将this.weather = data.list 呼叫缩短为：

map()