verwende Chart.js in Aurelia

8

Ich würde gerne chart.js in einem Aurelia-Projekt verwenden, aber ich bekomme Fehler. Wie füge ich Drittanbieter-Knotenpakete zu einer Aurelia-App hinzu?

Ich benutze Aurelia-cli, BTW

Folgendes habe ich getan

%Vor%

In aurelia.json habe ich folgendes hinzugefügt:

%Vor%

In app.html füge ich dann die Zeile

hinzu %Vor%

Aber ich bekomme den Fehler:

%Vor%

Ich habe verschiedene Dinge ausprobiert, wie das Chart in app.html

zu injizieren %Vor%

Und dann habe ich in app.html die folgende require-Anweisung hinzugefügt:

%Vor%

Hier ist die Lösung

Sie können hier ein funktionierendes Beispiel hier auschecken. Anfangs dachte ich, du müsstest das aurelia-chart Modul benutzen, aber es ist sehr schwierig zu benutzen, und deshalb empfehle ich dir stattdessen Chart.JS package zu benutzen. So können Sie das Modul chart.js in Ihre Aurelia-App integrieren:

%Vor%

Fügen Sie in aurelia.json die folgende Zeile zum Abschnitt prepend hinzu

%Vor%

Fügen Sie in der Datei app.js (oder einer anderen Modellansichtsdatei) die Zeile

hinzu %Vor%

Wenn Sie beispielsweise ein Diagramm auf der Startseite anzeigen möchten:

%Vor%

Und das ist es!

    
Kearney Taaffe 12.12.2016, 13:05
quelle

2 Antworten

1

1. Problem mit require

Bitte verwenden Sie nicht <require from="Chart"></require> in Ihrem app.html-Projekt. Das ist die Quelle Ihrer Fehlermeldung, da versucht wird, ein Aurelia-Modul zu laden und chart.js ist kein Aurelia-Modul (view / viewmodel) in Ihrem Quellcode.

2. Alternative Importsyntax

Überspringen Sie die inject -Zeilen in app.js , aber versuchen Sie eins der folgenden (versuchen Sie jeweils eins nach dem anderen) entweder in app.js oder in jedes Modul Sie werden Diagramm verwenden. Einer dieser Importe wird wahrscheinlich funktionieren.

%Vor%

3. Legacy vorangestellt

Wenn keiner der obigen Schritte funktioniert, importieren Sie ihn als Legacy Repo mit dem prepend Abschnitt von aurelia.json (vor dem dependencies Abschnitt) wie folgt:

%Vor%

Update für Aurelia-Chart: (hinzugefügt für spätere Zuschauer)

Da Sie mit aurelia-chart (von grofit) gelaufen sind, ist hier der Abhängigkeitscode für aurelia.json :

%Vor%     
LStarky 12.12.2016, 14:12
quelle
1

Ich habe gerade mit einem Aurelia-CLI-Projekt gearbeitet, und es erforderte einige zusätzliche Modifikationen.

Ich habe au install chart.js verwendet, aber es gibt ein offenes Problem , das besagt, dass es noch nicht intelligent genug ist, um es hinzuzufügen Verweise auf Paketabhängigkeiten.

Damit alles funktioniert, habe ich meinen aurelia.json-Abhängigkeiten Folgendes hinzugefügt:

%Vor%

Ich war dann in der Lage, import { Chart } from 'chart.js'; in meinem View-Modell zu verwenden und das Schnellstartbeispiel chart.js aus der Lifecycle-Methode attached viewmodel auszuführen.

In den chart.js-Dokumenten, die erwähnt werden, einschließlich der verkleinerten Version können Probleme auftreten, wenn Ihr Projekt bereits von der Moment-Bibliothek abhängig ist.

  

Die mitgelieferte Version enthält Moment.js, die in dieselbe Datei integriert sind. Diese Version sollte verwendet werden, wenn Sie Zeitachsen verwenden möchten und eine einzelne Datei enthalten möchten. Verwenden Sie diesen Build nicht, wenn Ihre Anwendung Moment.js bereits enthält. Wenn Sie dies tun, wird Moment.js zweimal eingefügt, wodurch die Ladezeit der Seite erhöht wird und möglicherweise Probleme mit der Version auftreten.

Diese Lösung kann helfen, wenn Sie in dieser Position sind.

    
Thorb 10.11.2017 02:22
quelle

Tags und Links