업데이트 차트 JS 차트

Question

HTML 파일

나는 chart.js을 업데이트 할이 내가 getTankData을 사용하고 .IN 페이지 새로 고침없이 매 10 초 후에 그래프를 생성() 백엔드에서 모든 데이터를 가져오고 그래프 요소를 업데이트하지만 그래프를 다시로드 할 때까지 그래프가 업데이트되지 않습니다. 그러나 다시로드하지 않고 자동으로 업데이트하려고합니다.

<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

은 어디 getTankData에게 10 초마다 호출?

하면 타이프 라이터 파일이 추가 대상 :

새로운 데이터는 호출 한 함수를 형성하여 배열을 제거하고 빈을 시작하시기 바랍니다 loop.so을 완료하기 전에 양식 백엔드 도착하는 동안 하늘의 배열은 항상 제시

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(); 
    }