Angular-Chart.js zeigt das Diagramm nicht an

Ich versuche, Angular-chart.js zu verwenden. Es wird nichts für mich angezeigt. Hier ist meine Javascript- und HTML-Seite.

(function(){
 angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) {
    $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
    $scope.series = ['Series A', 'Series B'];

    $scope.data = [
      [65, 59, 80, 81, 56, 55, 40],
      [28, 48, 40, 19, 86, 27, 90]
    ];
 });
})(); 
    
<!DOCTYPE html>
<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.2/Chart.min.js
    "></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.css
    " />
    <script src="angular-chart.min.js
    "></script>
    <script src="app.js"></script>
</head>

<body ng-app="app">
    <div ng-controller="BarCtrl">
        <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels"></canvas>
    </div>

</body>

</html>

Ich verstehe nicht, wo der Fehler ist, danke im Voraus für Ihre Hilfe

 Syed Ekram Uddin Emon10. Mai 2016, 17:52
Welchen Browser verwenden Sie? Benutzt du irgendwelche Dev-Tools, irgendetwas in der Konsole?
 Belal Mostafa Amin10. Mai 2016, 17:55
Ich benutze Google Chrome, ich habe alle möglichen Markups ausprobiert, meine app.js oft überprüft, überhaupt nichts in der Konsole, keine Warnungen, keine Fehler, nichts.

Antworten auf die Frage(8)

Lösung für das Problem

Es sieht so aus, als ob angular-chart.js Version 2 von Chart.js nicht unterstützt. Unten ist ein Ausschnitt, der ein Arbeitsdiagramm zeigt. Es enthält v1.1.1 von chart.js

angular.module("app", ["chart.js"]).controller("BarCtrl", function($scope) {
  $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  $scope.series = ['Series A', 'Series B'];

  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];
});
<!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" data-semver="1.5.3" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/dist/angular-chart.js"></script>
  <link rel="stylesheet" href="https://raw.githubusercontent.com/jtblin/angular-chart.js/master/dist/angular-chart.min.css" />
  <script src="app.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="BarCtrl">
    <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series"></canvas>
  </div>
</body>

</html>

 Belal Mostafa Amin10. Mai 2016, 18:55
Man du bist ein Held: D Es hat funktioniert: D Ich möchte dir 100 Starts geben, es sind ungefähr 3 Stunden vergangen und ich verstehe nicht, was zu tun ist: D Ich danke dir, ein Million Mann, wirklich, vielen Dank
 Dustin Hodges10. Mai 2016, 18:57
Lad zu helfen :) Ich habe Angular-chart.js vor und mag es sehr. Hoffentlich wird es aktualisiert, um v2 von chart.js @ zu unterstütze
 Dustin Hodges10. Mai 2016, 19:00
Auch wenn Sie eine Antwort hilfreich finden, stimmen Sie sie ab, indem Sie auf den Aufwärtspfeil links neben der Antwort klicken. Um eine Antwort zu akzeptieren, klicken Sie auf das Häkchen.
 Belal Mostafa Amin10. Mai 2016, 19:10
it sagt mir, wenn ich 15 Reputation verdient habe, nur dann kann ich mich verbessern, versprochen;). Empfiehlst du, native chat.js zu verwenden? Ich weiß nicht, auf welcher Grundlage ich mich entscheiden soll, ob ich einen von ihnen über den anderen verwenden soll?
 Dustin Hodges10. Mai 2016, 19:15
Es hängt wirklich von Ihrer Anwendung ab. Wenn Sie Angular verwenden, müssen Sie wahrscheinlich eine Bibliothek finden, die Bindungen zu einer systemeigenen js-Diagrammbibliothek anbietet (wie beispielsweise angle-chart.js). Wenn Sie nur angle verwenden, um die Bibliothek angular-chart.js zu verwenden, ist es wahrscheinlich besser, nur die nativen Bibliotheken zu verwenden. Es gibt eine Reihe von Winkelbibliotheken, mit denen Sie mit verschiedenen Diagrammbibliotheken interagieren können, obwohl ich nur angle-chart.js @ verwendet hab

Ihre Datenbindung ist falsch

<canvas id="bar" class="chart chart-bar" data="chart-data" labels="chart-labels" ></canvas>

Ihre Steuerung enthält weder variable Diagrammdaten noch Diagrammbeschriftungen. Sie haben sie anders benannt.

Die Attribute sind in umgekehrter Reihenfolge. Sollte chart-data = "data" sein chart-labels = "labels"

Beispiel vonhttp: //jtblin.github.io/angular-chart.js

<canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series"></canvas>
 Belal Mostafa Amin10. Mai 2016, 18:08
wenn ich getan habe, was Sie empfohlen haben, habe ich diesen Fehler auf der Konsole gefunden: TypeError: (Zwischenwert) [e] ist keine Funktion bei d (winkeldiagramm.min.js: 1) bei Object.fn (winkeldiagramm) .min.js: 1) bei r. $ digest (eckig.js: 15896) bei r. $ apply (eckig.js: 16160) bei eckig.js: 1679 bei Object.e [als Aufruf] (eckig.js: 4523) bei c (eckig.js: 1677) bei yc (eckig.js: 1697) bei Zd (eckig.js: 1591) bei eckig.js: 29013 (anonyme Funktion)
 Belal Mostafa Amin10. Mai 2016, 18:10
und es wird immer noch nichts angezeigt

n html wäre data = "chart-data" chart-data = "data"

 Belal Mostafa Amin10. Mai 2016, 18:11
Done, aber immer noch nichts, tatsächlich ist ein Fehler aufgetreten, der lautet: TypeError: (Zwischenwert) [e] ist keine Funktion bei d (winkeldiagramm.min.js: 1) bei Object.fn (winkeldiagramm) .min.js: 1) bei r. $ digest (eckig.js: 15896) bei r. $ apply (eckig.js: 16160) bei eckig.js: 1679 bei Object.e [als Aufruf] (eckig.js: 4523) bei c (eckig.js: 1677) bei yc (eckig.js: 1697) bei Zd (eckig.js: 1591) bei eckig.js: 29013
 Belal Mostafa Amin10. Mai 2016, 18:15
können Sie mir ein voll funktionsfähiges Beispiel mit den erforderlichen Skripten im Kopf geben, um es zu versuchen, aus irgendeinem Grund denke ich, dass etwas nicht mit dem Code, sondern mit der enthaltenen angle.js und den anderen Skripten nicht stimmt, weil ich kann in meinem Markup oder in meiner App kein Problem finden, js

Ich habe diesen Fehler beim Testen Ihres Codes erhalten:

(intermediate value)[e] is not a function angular chart

Es scheint, dass es eine Versionsinkongruenz gibt, habe versucht, dasselbe mit meinem eigenen Projekt, habe den gleichen Fehler. Bitte nimm V1.1.1 vonChart.js, wie bereits von @ dustin beantwortet.

Überprüfen Sie diesGeig.

Ihre Antwort auf die Frage