Ich versuche dynamisch ein Diagramm mit ng2-chart zu erstellen, Ich bekomme Informationen von einem eckigen 2-Service, wenn ich nur Etiketten des Diagramms ändern funktioniert es, und wenn ich Daten ändere, funktioniert es nur, aber wenn ich beide ändere, werden gerade Daten im Diagramm aktualisiert. Habe irgendjemand eine Erklärung für dieses merkwürdige Verhalten.
Meine Vorlage:
%Vor%meine Klasse:
%Vor%Anscheinend, wenn Sie die ursprüngliche Referenz nicht auf das Etiketten-Array ändern, scheint es zu funktionieren, zumindest für mich. Ich meine, wenn Sie einen völlig anderen Satz von Etiketten haben wollen, sollten Sie so etwas tun:
In der Vorlage:
%Vor%In der ts-Komponente:
%Vor% Der Schlüssel ist vielleicht die this.lineChartLabels.length = 0; -Anweisung, die Ihr Array praktisch "leert", indem Sie die Länge auf 0 setzen, ohne die Referenz zu ändern.
Hoffe das hilft!
Vor kurzem musste ich ng2-Charts verwenden und ich hatte ein sehr großes Problem mit der Aktualisierung meiner Daten, bis ich diese Lösung gefunden habe:
%Vor%und hier, was ich in meiner Komponente habe:
%Vor%Ich bin mir sicher, dass dies der richtige Weg ist, und hoffe, das wäre hilfreich
Wie Deyd bereits erwähnt hat, wird dies durch eine Kombination aus der Erkennung von Angular 2 + und einem Fehler in ng2-Diagrammen verursacht.
Nach meinen eigenen Beobachtungen (korrigiert mich, wenn ich falsch liege), führt Angular mehrere Änderungen innerhalb eines sehr kurzen Zeitrahmens zu einer einzigen Sammlung zusammen ( changes: SimpleChanges ), wenn ngOnChanges aufgerufen wird.
Leider überprüft ng2-charts nur, ob der Datensatz mit dieser Sammlung geändert wurde und aktualisiert ihn. Andernfalls wird das gesamte Diagramm vollständig neu erstellt. Aufgrund der Funktionsweise der Änderungserkennung wurden jedoch möglicherweise mehrere Eigenschaften geändert. Dann wird nur das Dataset aktualisiert, auch wenn die Beschriftungen und möglicherweise auch andere Eigenschaften aktualisiert wurden. Siehe ngOnChanges in ng2-Charts:
valor-software / ng2-charts / src / charts / charts.ts
Und wenn Sie keine separate Kopie von ng2-Diagrammen in Ihrer App haben und das Problem selbst beheben möchten, besteht eine mögliche Lösung für dieses Problem darin, das Dataset mithilfe der integrierten JavaScript-Funktion% mit einer kurzen Verzögerung festzulegen. co_de%.
Vorher:
%Vor%Nachher:
%Vor%Dies ist ein Problem in der Bibliothek ng2-Charts, um es zu lösen Ich habe den GitHub von ng2-Charts in meinem App-Verzeichnis geklont und folgende Schritte gemacht:
npm install updateChartLabels der Datei chart.ts onChanges auf. public ngOnChanges (Änderungen: SimpleChanges): void { if (this.initFlag) {
%Vor%Der Trick besteht darin, das Label und das Daten-Array zu löschen, der folgende Code funktionierte nicht für mich :( '' '
%Vor%
However when I changed the way I cleared the data helped me (Using object reference)
'' '
Es gibt noch eine andere Möglichkeit:
In Ihrem HTML haben Sie
%Vor%und in der Komponente habe ich eine Funktion, die das Diagramm mit neuen Daten aktualisiert, und dann klone ich die Datensätze und neu zuzuweisen
%Vor%das funktioniert für mich, hoffe es funktioniert auch für dich
Tags und Links javascript angular charts ng2-charts