我正在开发一个网络应用程序 - MEAN stack。我正在尝试使用 ChartJS 圆环图,但我需要它完全动态 - 首先,图表的数量是动态的(每个图表代表其他东西),所以有时它会是 3 个,有时是 20 个。第二,我希望我能够访问每个图表以进行实时数据更改。这可能吗?我尝试创建一个数组来保存每个图表数据,并使用 *ngFor 创建每个图表的画布元素,但它不起作用。
我的chartjs.component.ts:
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import { Chart } from 'chart.js';
import { pieceLabel } from 'chart.piecelabel.js';
import {ElementRef} from '@angular/core';
@Component({
selector: 'app-chartjs',
templateUrl: './chartjs.component.html',
styleUrls: ['./chartjs.component.css']
})
export class ChartjsComponent implements OnInit {
constructor( private _dataService : DataService, private elementRef: ElementRef) {
}
jsons: any;
NumberOfSystems: Number;
charts = [];
ngOnInit() {
this._dataService.getData().subscribe(data => {
this.jsons = data
this.NumberOfSystems = this.jsons.data[0][1].systems.length
this.createChartsData()
});
}
createChartsData()
{
var array=[];
for(var i =0; i<this.NumberOfSystems;i++)
{
var pie ={
type: 'doughnut',
data: {
labels: ["Disks", "Mgmt", "Hardware", "FC", "Vols&Pols"],
datasets: [
{
backgroundColor:["#008000","#008000","#008000","#008000","#008000"],
data: [20,20,20,20,20]
}
]
},
options: {
title: {
display: false
},
animations: true,
tooltips: {
enabled: true
},
legend: {
display: true
}
}
};
array.push(pie);
}
this.createCharts(array);
}
createCharts(pieData){
for(var j = 0; j<this.NumberOfSystems;j++)
{
let htmlRef = this.elementRef.nativeElement.select(`#canvas`+j);
console.log(htmlRef);
var tempChart = new Chart(htmlRef,pieData[j]);
this.charts.push(tempChart);
}
}
}
这是Chartjs.component.html:
<div>
<canvas *ngFor="let chart of charts; let i = index" id="canvas{{i}}">{{charts}}</canvas>
</div>
在此状态下,ElementRef 为 null。