Диаграмма.js + Angular 5-создание нескольких динамических диаграмм

Я разрабатываю веб - приложение-средний стек. я пытаюсь использовать chartjs doughnut chart, но мне нужно, чтобы он был полностью динамическим - во-первых, количество диаграмм динамично (каждая диаграмма представляет что-то другое), поэтому иногда это будет 3, а иногда 20. во-вторых, я хочу, чтобы у меня была возможность получить доступ к каждой диаграмме для изменения данных в реальном времени. возможно ли это вообще? я попытался создать массив, который будет содержать данные каждой диаграммы и использовать *ngFor для создания каждого элемента диаграммы canvas, но это не помогло работа. мои chartjs.деталь.ТС: 

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.деталь.html: 

<div>
<canvas *ngFor="let chart of charts; let i = index" id="canvas{{i}}">{{charts}}</canvas>
</div>

В этом состоянии ElementRef равен нулю.

1 2
chart.js mean-stack

1 ответ:

В вашем

Холст ... добавьте #yourId

(например : холст *ngFor="давайте диаграмм; пусть i = индекс" идентификатор="холст{{я}} #yourId")

Затем вы можете использовать @ViewChildren ('yourId') myCharts: any; (вы не можете использовать myCharts в ngOnInit, только в ngAfterViewInit и после), который даст Вам Ваш массив диаграмм.

Я не буду предоставлять больше подробностей, но вы можете использовать то, что находится внутри ваших myCharts (используйте консоль.log (myCharts), чтобы увидеть в деталях, что там есть), вы можете использовать это для изменения данных и так далее.

Надеюсь, это поможет.

4