创建多个动态图表

我正在开发一个Web应用程序 - MEAN堆栈.我正在尝试使用ChartJS圆环图,但我需要它是完全动态的 - 首先,图表的数量是动态的(每个图表代表其他东西)所以有时它将是3和有时20秒.其次,我希望能够访问每个图表以进行实时数据更改.它甚至可能吗？我试图创建一个数组,它将保存每个图表数据并使用*ngFor创建每个图表一个canvas元素,但它不起作用.

我的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

这是chartjs.component.html:


{{charts}}



在此状态下,ElementRef为null.  


1> 小智..：
在你的 

canvas ...添加一个#yourId

(例如:canvas*ngFor ="让图表图表;让我=索引"id ="canvas {{i}} #yourId")

然后你可以使用@ViewChildren('yourId')myCharts:any; (你不能在ngOnInit中使用myCharts,只能在ngAfterViewInit和之后使用),这将为你提供你的图表数组.

我不会提供更多细节,但您可以使用myCharts中的内容(使用console.log(myCharts)详细查看其中的内容),您可以使用它来更改数据等等.

希望这可以帮助.