Создать динамически обновляемый график с Angular 6 по вызовам API

Question

Я пытаюсь реализовать динамическое обновление графика angular chart.js на основе вызовов API. В настоящее время я реализовал его в виде статической диаграммы следующим образом.

service

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 Option, как график (Чтобы обновить только этот компонент графика), например,

динамически обновляемый график

Какие варианты я могу выбрать?и как я могу реализовать это?

Answer 1

Вы можете сделать это через службу опроса, где вы делаете каждый запрос после определенного интервала,

Вы можете сделать запрос на основе интервала, используя $ interval,

Observable.interval (3000)

или

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