web-dev-qa-db-fra.com

Créer plusieurs graphiques dynamiques

je développe une application Web - pile MEAN. J'essaie d'utiliser le graphique en anneau de ChartJS, mais j'en ai besoin pour être complètement dynamique. D'abord, le nombre de graphiques est dynamique (chaque graphique représente autre chose). accéder à chacun des graphiques pour changer les données en temps réel. est-ce même possible? J'ai essayé de créer un tableau qui contiendra chacune des données des graphiques et utiliser * ngFor pour créer chaque graphique un élément de toile, mais cela n'a pas fonctionné.

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);
}   
}
}

et voici le chartjs.component.html: 

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

dans cet état, ElementRef est null. 

angularchartschart.jsmean-stackangular5
2
Arad Gonen

Dans ton 

toile ... ajouter un #yourId

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

Ensuite, vous pouvez utiliser @ViewChildren ('yourId') myCharts: any; (vous ne pouvez pas utiliser myCharts dans ngOnInit, mais uniquement dans ngAfterViewInit et après), ce qui vous donnera votre tableau de graphiques.

Je ne donnerai pas beaucoup plus de détails, mais vous pouvez utiliser le contenu de vos myCharts (utilisez un fichier console.log (myCharts) pour voir en détail ce qu'il contient), vous pouvez l'utiliser pour modifier des données, etc.

J'espère que cela t'aides.

5
Alvin Chipmunk

Voici l'une des implémentations possibles de la solution proposée précédemment. J'ai créé un tableau appelé "diagrammes", qui contiendra autant d'éléments que les diagrammes que je souhaite créer. Chaque élément de ce tableau a un identifiant et la clé où nous placerons le graphique ultérieurement (AfterViewInit).

HTML: 

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

.TS:

 import {Component, OnInit, Input, AfterViewInit, ViewChildren} from '@angular/core';
 import { Chart } from 'chart.js';

 // ...

 @ViewChildren('mycharts') allMyCanvas: any;  // Observe #mycharts elements
 charts: any;    // Array to store all my charts

 constructor() {
   this.charts = [
    {
      "id": "1",   // Just an identifier
      "chart": []            // The chart itself is going to be saved here
    },
    {
      "id": "2",
      "chart": []
    },
    {
      "id": "3",
      "chart": []
    }
  ]
 }

 ngAfterViewInit() {
   let canvasCharts = this.allMyCanvas._results;  // Get array with all canvas
   canvasCharts.map((myCanvas, i) => {   // For each canvas, save the chart on the charts array 
      this.charts[i].chart = new Chart(myCanvas.nativeElement.getContext('2d'), {
        // ...
      }
   })
 }
1
Leonardo Kuffo