如何从 API 获取数据并使用 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'
    },
];

如果您只使用data的list属性，则可以更改此分配：

this.weather = data

到：

this.weather = data.list

并将map()调用缩短为：

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

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