在API调用上使用Angular 6创建动态更新图

Question

我正在尝试基于api调用实现angular chart.js图动态更新目前，我已将其实现为静态图表，如下所示。

服务

import { Injectable } from '@angular/core';
import {HttpClient,HttpHeaders} from '@angular/common/http';
import 'rxjs/add/operator/map';


@Injectable({
  providedIn: 'root'
})
export class WeatherService {

  constructor(private _http:HttpClient) {
   }

   dailyForecast(){
    return this._http.get("http://samples.openweathermap.org/data/2.5/history/city?q=Warren,OH&appid=b6907d289e10d714a6e88b30761fae22")
      .map(result => result);
   }


}

零件

 ngOnInit(){
  this._weather.dailyForecast()
               .subscribe(res=>{
                 let temp_max = res['list'].map(res=> res.main.temp_max)
                 let temp_min = res['list'].map(res=> res.main.temp_min)
                 let alldates = res['list'].map(res=> res.dt)

                 let weatherDates = []
                 alldates.forEach((res) => {
                   let jsdate = new Date(res*1000)
                   weatherDates.push(jsdate.toLocaleTimeString('en',{year:'numeric',month:'short',day:'numeric'}))
                 });

                 this.chart = new Chart('canvas',{
                    type: 'line',
                    data : {
                      labels:weatherDates,
                      datasets: [
                        {
                          data:temp_max,
                          borderColor: '#3cba9f',
                          fill:false
                        },
                        {
                          data:temp_min,
                          borderColor: '#ffcc00',
                          fill:false
                        }
                      ]
                    },
                    options:{
                      legend:{
                        display:false
                      },
                      scales: {
                        xAxes: [{
                          display:true
                        }],
                        yAxes: [{
                          display:true
                        }]
                      }
                    }
                 });
               })
  }

但是我想让它看起来像这样的IQ选项，例如graph（仅更新该graph组件），

动态更新图

我可以采取哪些选择？ 我该如何实施呢？

Answer 1

您可以通过轮询服务来做到这一点，在该服务中，您会在特定间隔后发出每个请求，

您可以使用$ interval根据时间间隔进行请求，

Observable.interval（3000）

要么

let intervalId = setInterval(() => {
   this.updateData();
}, 3000);