更新圖表JS圖表動態在角2

Question

HTML文件

我想更新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

你空數組總是呈現，而新的數據形式到達後臺完成loop.so之前，請刪除您的陣列形成你調用的函數，並啓動你的空數組開頭。

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

Answer 2

你在哪裏打電話getTankData每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(); 
    }