在我的代码中,我使用API获取服务器数据进行监控,我有多个图表,所有图表都工作正常,所以我每1秒更新一次图表,我也每1秒从服务器调用API,但只有我的第一个图表会更新其他图表,任何解决方案??注意:我用的是valor-software的ng 2-chart
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>
3条答案
按热度按时间busg9geu1#
经过一番研究,我发现了这个问题:问题是:
它只选择第一个孩子,所以
只更新第一个孩子,解决方法是:应使用QueryList
并更新列表:
ni65a41a2#
你不需要这样做,创建一个数据对象和一个标签对象,在你的当前对象中。当你从你的数据源中获取你的图形数据时,你可能需要修改它以适应你正在工作的图形模式,然后迭代你的所有对象并插入图形数据。
这一切都发生在一个点击事件中,我使用Angular 8。如果你需要帮助,请给我留言。
(下面模型中的属性)
6jygbczu3#
正如在其他答案中所说,更新只对第一个图表起作用。似乎要更新图表,您需要对其ChartDataSet进行“克隆”,而不仅仅是更新数据集或标签,而是重新分配整个变量。您可以在github上看到这种情况下的问题:https://github.com/valor-software/ng2-charts/issues/865
使其工作的解决方案:
一个stackblitz来证明我找到的答案:https://stackblitz.com/edit/ng2-charts-multiple-charts-tcc6ds?file=src%2Fapp%2Fapp.component.ts