NG2图表多图表更新

Question

在我的代码中，我使用 API 获取服务器数据以进行监控而且我有多个图表，所有图表都工作正常，所以我每 1 秒更新一次我的图表，我也每 1 秒从服务器调用 API，但只有我的第一个图表不会更新其他图表，任何解决方案？？注意：我正在使用 ng2-chart by valor-software

import { Chart } from 'chart.js';
import { ChangeDetectorRef } from '@angular/core';
import { Component, OnInit,ViewChild} from '@angular/core';
import { ApiServiceService } from '../api-service.service';
import { Observable , interval } from 'rxjs';
import { switchMap} from 'rxjs/operators';
import {IData} from '../interface/data'
import { BaseChartDirective} from 'ng2-charts';
import { DatePipe } from '@angular/common';
Chart.defaults.global.elements.line.fill = false;
//==================================================
import { Servers } from '../custom-config/servers'; // Servers Data
import {lineChart} from '../custom-config/chart-config'// chart Configration Data
@Component({
  selector: 'app-server-monit',
  templateUrl: './server-monit.component.html',
  styleUrls: ['./server-monit.component.css'],
})
export class ServerMonitComponent implements OnInit {
 @ViewChild( BaseChartDirective) chart: BaseChartDirective;
 
  public _servers= Servers;
  //==========================================
  //  time 
  pipe = new DatePipe('en-US'); // Use your own locale
  public now;
  public currentTime;
  //==========================================
  // Line Chart configration
  public chartType = 'line';
  public chartLegend = true;
  public chartColor = '#eee'
  public chartOptions = lineChart.Options
  public colors = lineChart.Colors
  constructor(private api: ApiServiceService) {
   }
  ngOnInit() {
    for (let i = 0; i < this._servers.length; i++ ) {
      // get data on Init
      this.api.checkServer(this._servers[i].ip+':'+this._servers[i].port).subscribe((data:IData) => {
        this.proccessData(data, i)
      });
      // get  data every subsequent 1 seconds
    const result = interval(1000).pipe(
    switchMap(() => this.api.checkServer(this._servers[i].ip+':'+this._servers[i].port)),)
    .subscribe((data:IData) => {
      this.proccessData(data, i) // proccess the APIdata 
      this.forceChartRefresh(); // Update charts
    });
    }
  }
  proccessData(data: IData , index){
    
      this.now = Date.now();
      this.currentTime = this.pipe.transform(this.now, 'mediumTime');
      //=============================================================
      let totalClients = data.total_clients;
      let input = Math.round(data.input_kbit  /1024);
      let output = Math.round(data.output_kbit /1024);
      if(
        this._servers[index].charts.traffic.dataset[0].data.length <= 20 &&
        this._servers[index].charts.traffic.dataset[1].data.length <= 20 &&
        this._servers[index].charts.traffic.dataset[2].data.length <= 20
      ){
      this._servers[index].charts.traffic.dataset[0].data.push(totalClients)
      this._servers[index].charts.traffic.dataset[1].data.push(input)
      this._servers[index].charts.traffic.dataset[2].data.push(output)
      this._servers[index].charts.traffic.labels.push(this.currentTime)
      }
      else {
        this._servers[index].charts.traffic.dataset[0].data.shift()
        this._servers[index].charts.traffic.dataset[1].data.shift()
        this._servers[index].charts.traffic.dataset[2].data.shift()
        this._servers[index].charts.traffic.labels.shift()
      }
      
  }
  forceChartRefresh() {
    this.chart.chart.update()
  }
}

<p>
  server-monit works!
</p>
<div class="col-4" *ngFor="let server of _servers">
  <div>
  <canvas     baseChart 
              [datasets]="server.charts.traffic.dataset"
              [labels]="server.charts.traffic.labels"
              [options]="chartOptions"
              [colors]=""
              [legend]="chartLegend"
              [chartType]="chartType"
              ></canvas>
            </div>
</div>

Answer 1

经过一些研究，我发现了这个问题：问题是：

@ViewChild( BaseChartDirective) chart: BaseChartDirective;

它只选择第一个孩子，所以

this.chart.chart.update()

只更新第一个孩子，解决方法是：应该使用QueryList

@ViewChildren(BaseChartDirective) charts: QueryList<BaseChartDirective>;

并更新列表：

  this.charts.forEach((child) => {
      child.chart.update()
  });

Answer 2

您不需要这样做，只需在当前对象中创建数据对象和标签对象。 当您从数据源获取图形数据时，您可能必须对其进行修改以适应您正在使用的图形模式，然后迭代所有对象并插入图形数据。

这一切都发生在点击事件期间，我使用 Angular 8。如果您需要帮助，请给我发消息。

(以下模型中的属性(

public barChartData: any[] = [{ data: [], label: 'Red' }, { data: [], label: 'Blue' }],
public barChartLabels: any[] = [""]
this.redBlueCountByDate.forEach((item) => {
  barChartLabels.push(new Date(item.eomDate).toLocaleDateString("en-US"));
  barChartData[0].data.push(item.redDataCount);
  barChartData[1].data.push(item.blueDataCount);            
})
this.modelData.find(x => x.dataID == dataID).barChartData = barChartData;
this.modelData.find(x => x.dataID == dataID).barChartLabels = barChartLabels;

Answer 3

正如在其他答案中所说，更新仅适用于第一个图表。似乎要更新图表，您需要"克隆"其ChartDataSets，而不仅仅是更新数据集或标签，而是重新分配整个变量。您可以在 github 上看到有关此案例的问题：https://github.com/valor-software/ng2-charts/issues/865

使其工作的解决方案：

//You have a dataset as an attribute of your component
public barChartData: ChartDataSets[] = [
  { data: [1, 2, 3], label: 'Approved', stack: 'a' },
  { data: [1, 2, 3], label: 'Accepted', stack: 'a' },
];
//In your update function just clone the dataset 
//Then update it with new data and reassign it to the attribute barChartData
update(){
  const clone = JSON.parse(JSON.stringify(this.barChartData));
  clone[0].data = data;
  this.barChartData = clone;
}

一个堆栈闪电战来证明我找到的答案：https://stackblitz.com/edit/ng2-charts-multiple-charts-tcc6ds?file=src%2Fapp%2Fapp.component.ts