wake-up-neo.com

Dynamisch aktualisierte ng2-Charts

Ist es möglich, chart von ng2-charts dynamisch zu aktualisieren? Ich weiß, dass es andere Bibliotheken wie angular2-highcharts gibt, aber ich würde es gerne mit ng2-charts machen. Die Hauptfrage ist, wie ich chart nach einem Klick auf die Schaltfläche neu zeichnen kann. Ich kann die Größe des Fensters ändern und die Daten werden aktualisiert. Es muss also eine beliebige Option geben, um dies manuell zu tun.

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

4
ulou

Ich finde es heraus, vielleicht ist es nicht die beste Option, aber es funktioniert. Wir können vorhandene chart nicht aktualisieren, aber wir können eine neue erstellen, indem wir unsere vorhandene chart verwenden und neue Punkte hinzufügen. Wir können sogar einen besseren Effekt erzielen, indem wir die Animation des Diagramms ausschalten.

Funktion, die das Problem gelöst hat:

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

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

@UPDATE: als @Raydelto Hernandez im Kommentar unten erwähnt, bessere Lösung ist:

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

Eine gute Möglichkeit ist, das Diagramm selbst in den Griff zu bekommen, um es mithilfe der API neu zu zeichnen:

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

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

}
7
Stanislasdrg

Vor kurzem musste ich ng2-Charts verwenden und hatte große Probleme beim Aktualisieren meiner Daten, bis ich diese Lösung fand:

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

und hier was ich in meiner Komponente habe:

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

Ich bin sicher, das ist der richtige Weg.

Es ist möglich, jedes Diagramm von ng2-charts dynamisch zu aktualisieren. Beispiel: http://plnkr.co/edit/m3fBiHpKuDgYG6GVdJQD?p=preview

Das Angular Aktualisieren von Diagrammen, Variablen oder Referenzen muss sich ändern. Wenn Sie nur den Wert des Array-Elements ändern, werden die Variablen und Referenzen nicht geändert. Siehe auch Github .

1
Sfairet

** Das hat bei mir geklappt - mit Tortendiagramm: *

Component.html:

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

Component.ts:

In der Kopfzeile:

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

Im Deklarationsabschnitt der Exportklasse:

@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']
}];

Nach dem Block, der Ihre Tortendiagrammdaten aktualisiert (mithilfe von Diensten/Sockets oder auf andere Weise):

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

Ich habe diesen Artikel nach längerer Suche gefunden. Dann habe ich jede Lösung ausprobiert, die in diesem Artikel erwähnt wird, aber keine funktionierte ordnungsgemäß. Schließlich habe ich mich mit einer dynamischen Komponente abgefunden.

Ich habe die dynamischen Daten für die Komponente bereitgestellt, die der übergeordneten Komponente dynamisch hinzugefügt wird. Ich habe über den ganzen Prozess geschrieben, damit Sie die Herausforderungen nicht durchstehen.

0
Samiullah Khan