在 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 Option 这样的图形（仅更新该图形组件），

动态更新图表

我可以选择哪些选项？我该如何实施？

Answer 1

您可以通过轮询服务来完成，您可以在特定时间间隔后发出每个请求，

您可以使用 $interval 根据间隔发出请求，

Observable.interval(3000)

或

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

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

Create dynamically updating graph with Angular 6 on API calls

javascript

charts

typescript

angular

angular6