javascript - 根据从 nodejs 服务获取的数据以 Angular 2 动态更新 Chart js 图表

Question

HTML 文件

我想在不重新加载页面的情况下每 10 秒更新一次 chart.js 生成的图表。在此我使用 getTankData() 从后端获取所有数据并更新图表元素，但图表直到我才得到更新重新加载页面。但我想在不重新加载的情况下自动更新它。

<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>

typescript 文件

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 = [];
 }