Chart.js + Angular 5 - create multiple dynamic charts

问题:

i'm developing a web application - MEAN stack. i'm trying to use ChartJS doughnut chart but i need it to be completely dynamic - first, the number of charts is dynamic (each chart represent something else) so sometimes it will be 3 and sometime 20. second, i want ti be able to access each of the charts for real-time data changing. does it even possible? i tried to create an array that will hold each of the charts data and use *ngFor to create each chart an canvas element but it didn't work. my 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); }    } } 

and this is the chartjs.component.html:

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

in this state, the ElementRef is null.

回答1:

In your

canvas ... add a #yourId

(example : canvas *ngFor="let chart of charts; let i = index" id="canvas{{i}} #yourId")

Then you can use @ViewChildren('yourId') myCharts: any; (you can't use myCharts in ngOnInit, only in ngAfterViewInit and after) which will give you your array of charts.

I won't provide much more detail but you can use what's inside your myCharts (use a console.log(myCharts) to see in detail what's in there), you can use this to change data and so on.

Hope this helps.

文章来源: Chart.js + Angular 5 - create multiple dynamic charts