web-dev-qa-db-fra.com

Graphiques ng2 mis à jour dynamiquement

Est-il possible de mettre à jour chartde ng2-charts de manière dynamique? Je sais qu'il existe d'autres bibliothèques telles que angular2-highcharts, mais j'aimerais le manipuler à l'aide de ng2-charts. La question principale est comment puis-je redessiner chartname__, après un clic sur le bouton? Je peux redimensionner la fenêtre et les données seront mises à jour, il doit donc y avoir une option pour le faire manuellement.

https://plnkr.co/edit/fXQTIjONhzeMDYmAWTe1?p=preview

angularchartsng2-charts
4
ulou

Je pense que ce n’est peut-être pas la meilleure option, mais ça marche. Nous ne pouvons pas mettre à jour la chart existante, mais nous pouvons en créer une nouvelle en utilisant notre chart existante et ajouter de nouveaux points. Nous pouvons même obtenir un meilleur effet en désactivant l'animation du graphique.

Fonction qui a résolu le problème:

updateChart(){
   let _dataSets:Array<any> = new Array(this.datasets.length);
   for (let i = 0; i < this.datasets.length; i++) {
      _dataSets[i] = {data: new Array(this.datasets[i].data.length), label: this.datasets[i].label};
      for (let j = 0; j < this.datasets[i].data.length; j++) {
        _dataSets[i].data[j] = this.datasets[i].data[j];
      }
   }
   this.datasets = _dataSets;
}

Démo en direct: https://plnkr.co/edit/fXQTIjONhzeMDYmAWTe1?p=preview

@UPDATE: Comme @Raydelto Hernandez est mentionné dans le commentaire ci-dessous, la meilleure solution est:

updateChart(){
    this.datasets = this.dataset.slice()
}
5
ulou

Un bon moyen consiste à saisir le graphique lui-même pour le redessiner à l'aide de l'API:

export class MyClass {
 @ViewChild( BaseChartDirective ) chart: BaseChartDirective;

  private updateChart(){
   this.chart.ngOnChanges({});
  }

}
7
Stanislasdrg

Récemment, j'ai dû utiliser ng2-charts et je rencontrais de gros problèmes pour mettre à jour mes données jusqu'à ce que je trouve cette solution:

<div class="chart">
        <canvas baseChart [datasets]="datasets_lines" [labels]="labels_line" [colors]="chartColors" [options]="options" [chartType]="lineChartType">
        </canvas>
</div>

et voici ce que j'ai dans mon composant:

import { Component, OnInit, Pipe, ViewChild, ElementRef } from '@angular/core';
import { BaseChartDirective } from 'ng2-charts/ng2-charts';

@Component({
    moduleId: module.id,
    selector: 'product-detail',
    templateUrl: 'product-detail.component.html'
})

export class ProductDetailComponent {
    @ViewChild(BaseChartDirective) chart: BaseChartDirective;

    private datasets_lines: { label: string, backgroundColor: string, borderColor: string, data: Array<any> }[] = [
        {
            label: "Quantities",
            data: Array<any>()
        }
    ];

    private labels_line = Array<any>();

    private options = {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    };


    constructor() { }
    ngOnInit() {

        this.getStats();

    }
    getStats() {

        this.labels_line = this.getDates();

        this._statsService.getStatistics(this.startDate, this.endDate, 'comparaison')
            .subscribe(
            res => {
                console.log('getStats success');
                this.stats = res;

                this.datasets_lines = [];

                let arr: any[];
                arr = [];
                for (let stat of this.stats) {
                    arr.Push(stat.quantity);
                }

                this.datasets_lines.Push({
                    label: 'title',
                    data: arr
                });

                this.refresh_chart();

            },
            err => {
                console.log("getStats failed from component");
            },
            () => {
                console.log('getStats finished');
            });
    }

    refresh_chart() {
        setTimeout(() => {
            console.log(this.datasets_lines_copy);
            console.log(this.datasets_lines);
            if (this.chart && this.chart.chart && this.chart.chart.config) {
                this.chart.chart.config.data.labels = this.labels_line;
                this.chart.chart.config.data.datasets = this.datasets_lines;
                this.chart.chart.update();
            }
        });
    }

    getDates() {
        let dateArray: string[] = [];
        let currentDate: Date = new Date();
        currentDate.setTime(this.startDate.getTime());
        let pushed: string;
        for (let i = 1; i < this.daysNum; i++) {
            pushed = currentDate == null ? '' : this._datePipe.transform(currentDate, 'dd/MM/yyyy');
            dateArray.Push(pushed);
            currentDate.setTime(currentDate.getTime() + 24 * 60 * 60 * 1000);
        }
        return dateArray;
    }    
}

Je suis sûr que c'est la bonne façon de le faire.

3
Abdelhalim FELLAGUE CHEBRA

Mettre à jour n'importe quel graphique de ng2-charts de manière dynamique est possible. Exemple: http://plnkr.co/edit/m3fBiHpKuDgYG6GVdJQD?p=preview

Ce Angular tableau de mise à jour, variable ou référence doit changer. Lorsque vous modifiez simplement la valeur d'un élément de tableau, les variables et les références ne sont pas modifiées. Voir aussi Github .

1
Sfairet

** Cela a fonctionné pour moi - avec camembert: *

Component.html: 

 <canvas baseChart [colors]="chartColors" [data]="pieChartData" [labels]="pieChartLabels" [chartType]="pieChartType"></canvas>

Composant.ts:

Dans la section d'en-tête:

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Chart } from 'chart.js';
import { BaseChartDirective } from 'ng2-charts/ng2-charts';

Dans la section déclaration de la classe d'exportation:

@ViewChild(BaseChartDirective) chart: BaseChartDirective;
// for custom colors
public chartColors: Array<any> = [{
backgroundColor: ['rgb(87, 111, 158)', 'yellow', 'pink', 'rgb(102, 151, 185)'],
borderColor: ['white', 'white', 'white', 'white']
}];

Après le bloc qui met à jour vos données de graphique à secteurs (en utilisant services/sockets ou tout autre moyen):

this.chart.chart.update();
1
Ab.Progr

J'ai trouvé cet article après quelques recherches. Ensuite, j'ai essayé toutes les solutions mentionnées dans cet article, mais aucune ne fonctionnait correctement. Finalement je me suis installé en utilisant un composant dynamique.

J'ai fourni les données dynamiques au composant ajouté dynamiquement au composant parent. J'ai écrit sur le processus entier juste pour ne pas passer à travers les défis.

0
Samiullah Khan