ChartJS und erfordern: Diagramm ist undefined

Ich verwende requirjs für mein Projekt und es funktioniert gut mit anderen Modulen (jQuery, Lenker, ...), aber nicht mit Chartjs. HierChartJS und erfordern: Diagramm ist undefined

ist ein Beispiel, das fehlschlägt:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Test</title> 
    <script src="scripts/libs/requirejs/require.js"></script> 
    <script> 
     require(['scripts/libs/chartjs/Chart.min'], function(Chart) { 
     console.log("go"); // prints "go" 
     console.log(Chart); // prints "undefined" 
     var ctx = document.getElementById("test").getContext("2d"), 
      chart = new Chart(ctx); // Throws a TypeError: Chart is not a constructor 
     }); 
    </script> 
    </head> 
    <body> 
    <canvas id="test" width="200px" height="200px"></canvas> 
    </body> 
</html>

Die require.js und Chart.min.js geladen in Ordnung, aber ich kann nicht ChartJS zu arbeiten.

Hier sind die Abhängigkeiten von meinem Projekt in bower.json:

"dependencies": { 
    "jquery": "^2.2.0", 
    "bootstrap": "^3.3.6", 
    "select2": "^4.0.1", 
    "select2-bootstrap": "^1.3.0", 
    "handlebars": "~4.0.5", 
    "requirejs": "^2.2.0", 
    "Chart.js": "^2.0.0" 
    }

Und die installierten Versionen:

├── Chart.js#2.0.0 
├─┬ bootstrap#3.3.6 (latest is 4.0.0-alpha.2) 
│ └── jquery#2.2.0 (2.2.3 available, latest is 3.0.0-beta1) 
├── handlebars#4.0.5 
├── jquery#2.2.0 (2.2.3 available, latest is 3.0.0-beta1) 
├── requirejs#2.2.0 
├── select2#4.0.1 (4.0.2 available) 
└── select2-bootstrap#1.3.0

Jede Idee, was ich falsch mache?

Quelle

2016-04-14 lilorox

Haben Sie Div mit Test-ID? – uzaif

Das ist die Canvas ID. – lilorox

setzen Sie Ihr Skript an der Unterseite, so dass es Leinwand unter der Leinwand zugreifen – uzaif

Wenn Sie v2.0 von Chart.js verwenden, stellen Sie sicher, dass Sie eine aktuelle Version erhalten (es funktionierte für mich mit 2.0.0-beta2, aber nicht mit alpha). Da Chart.js von moment.js abhängig ist, müssen Sie dies ebenfalls berücksichtigen.

Bei älteren Versionen von Chart.js v2.0 (sagen alpha), werden Sie Chart.js als Legacy-Skript geladen werden müssen und verwenden Sie die globale Variable (oder noConflict()).

Die Abhängigkeit von moment.js ist nicht sehr offensichtlich (verwandtes Thema - https://github.com/nnnick/Chart.js/issues/2110). Wenn Sie Chart.js als normale Skriptdatei laden, erhalten Sie Folgendes auf der Konsole.

Wenn Chart.js von require.js geladen wird, bewirkt diese Abhängigkeit einer Anforderung für moment.js.

Quelle

2016-04-14 12:55:23 potatopeelings

Ja, ich verwende v2.0.0. Aber die Abhängigkeit zu Moment ist nicht in der Dokumentation zitiert :( – lilorox

Also einfach moment.js auch und eine neuere Version von Chart.js v2.0 wenn Sie eine ältere Version verwenden und es sollte funktionieren (Ich habe nur moment.js im root-Verzeichnis, so dass es automatisch geladen wurde, wenn requirejs es als eine Abhängigkeit identifiziert) – potatopeelings

Ich brauche keine momentjs und ein kurzer Versuch (indem es es Seite-an-Seite Chartjs in der require-Funktion geladen) löste nicht Ausgabe, also ging ich zurück zu Chart.js 1.1.1 und es funktioniert. Danke! – lilorox

ChartJS und erfordern: Diagramm ist undefined

Antwort

Verwandte Themen