从nodejs服务获取数据中，在Angular 2中动态更新图表JS图

Question

html文件

我想在每10秒钟后每10秒内更新Chart.js生成的图形。重新加载页面。但是我想在没有重新加载的情况下自动更新它。

<div class="container">
    <div class="row">
    <div class="col-md-3">
      <h2>User Water Graph</h2>
    </div>
      <div class="col-md-9">
        <div style="display: block;">
        <canvas id="myChart" baseChart *ngIf="time_data && water_data.length > 0"
          width="700" height="400"
                    [datasets]="lineChartData"
                    [labels]="lineChartLabels"
                    [options]="lineChartOptions"
                    [colors]="lineChartColors"
                    [legend]="lineChartLegend"
                    [chartType]="lineChartType"></canvas>
        </div>
      </div>
    </div>
  </div>

打字稿文件

import { Component, OnInit } from '@angular/core';
import {AuthService} from '../../services/auth.service';
import {Router} from '@angular/router';
import {FlashMessagesService} from 'angular2-flash-messages';

@Component({
  selector: 'app-admin-dashboard',
  templateUrl: './admin-dashboard.component.html',
  styleUrls: ['./admin-dashboard.component.css']
})
export class AdminDashboardComponent implements OnInit {
  total_tank_data:any;
  time_data:Array<any>;
  water_data:Array<any>;
  lineChartData:Array<any> = []
  lineChartLabels:Array<any>
  lineChartOptions:any
  lineChartColors:Array<any>
  lineChartLegend:boolean
  lineChartType:string
  data_length:any
  constructor(
    private authService:AuthService,    
    private flashMessage:FlashMessagesService,
    private router:Router,) { }
  ngOnInit() {
    this.getTankData()
    if(localStorage.getItem('type')=='user'){
      this.authService.userAccess = true
    }
    else{
      this.authService.adminAccess = true
    }
  }

  getTankData(){
    var i;
    console.log(document.getElementById('chart'));
    this.authService.getTank().subscribe(data=>{
      this.time_data = [];
      this.water_data = [];
      this.total_tank_data = [];
      this.total_tank_data = data['tank'];
      this.lineChartData = [];
      this.lineChartLabels = [];
      for(i=0;i<this.total_tank_data.length;i++ ){
        this.time_data[i] = String(this.total_tank_data[i]['timestamp']);
        this.water_data[i]=parseInt(this.total_tank_data[i]['liters']);
      }
      this.lineChartData=[
        {data: this.water_data, label: 'Tank'}
      ];
      this.lineChartLabels= this.time_data;
      console.log(this.lineChartLabels)
      this.lineChartOptions= {
        responsive: true
      };
      this.lineChartColors = [
        { // grey
          backgroundColor: 'rgba(64,164,223,0.6)',
          borderColor: 'rgba(148,159,177,1)',
          pointBackgroundColor: 'rgba(148,159,177,1)',
          pointBorderColor: '#fff',
          pointHoverBackgroundColor: '#fff',
          pointHoverBorderColor: 'rgba(148,159,177,0.8)'
        },
      ];
      this.lineChartLegend= true;
      this.lineChartType= 'line';
      this.data_length = this.total_tank_data.length; 

    });
setInterval(()=>{
this.getTankData();
location.reload()
},10000);
  }

}

Answer 1

在完成循环之前，在新数据到达时始终显示空数组。>

ngOnInit(){
this.time_data = [];
this.water_data = [];
 }

Answer 2

您每10秒在哪里打电话？

将其添加到您的打字稿文件中：

import { ChangeDetectorRef } from '@angular/core';

 constructor(private ref: ChangeDetectorRef){}
 ngOnInit(){
   //Call it every 10 seconds
   setInterval(this.getTankData(), 10000);
}

 //add an change detector at the end of your getTankData function
   getTankData(){
     ...
    this.ref.detectChanges();
    }