如何从 API 获取数据并使用 Chart.js 和 Angular 8 在其上创建图表？答案

【问题标题】：How to take data from an API and create a chart on that using Chart.js and Angular 8?如何从 API 获取数据并使用 Chart.js 和 Angular 8 在其上创建图表？
【发布时间】：2020-01-22 06:37:49
【问题描述】：

我是 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 的列表数组中，我不确定如何获取数组的各个元素。任何帮助将非常感激。谢谢。

【问题讨论】：

这里有很多代码，但您的问题似乎是关于正确解析数组？您能否仅举一个您需要解析的数据的示例，并省略任何非绝对必要的代码？
@DanielSchroederDev 是的，我已经编辑了这个问题。请看一下。谢谢。
你想提取哪一部分，为什么难？
我想从主阵列获取温度、海平面和压力，主阵列是另一个名为 list 的阵列的一部分。数组列表有 3 个主条目。我无法提取该数据。

标签： javascript html angular api chart.js

【解决方案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'
    },
];

【讨论】：