Angular-Chart.js es nicht das Diagramm

nicht angezeigt I Angular-chart.js zu verwenden, versuche es hier nichts für mich nicht angezeigt ist mein Javascript und HTML-SeiteAngular-Chart.js es nicht das Diagramm

(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, Vielen dank im Voraus für Ihre Hilfe

Quelle

2016-05-10 Belal Mostafa Amin

Welchen Browser benutzen Sie? Verwenden Sie irgendwelche Dev Tools, irgendetwas in der Konsole? –

Ich benutze Google Chrome, ich habe alle möglichen Markup versucht, überprüft auf meiner app.js viele Male, nichts in der Konsole überhaupt, keine Warnungen, keine Fehler, nichts. –

Es sieht aus wie early-chart.js Version 2 von Chart.js nicht unterstützt. Unten ist ein Ausschnitt, der ein Arbeitsdiagramm zeigt. Es 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>

Quelle

2016-05-10 16:38:04

Mann, du bist ein Held: D es funktionierte: DI will dir 100 Starts geben, es ist ungefähr 3 Stunden gewesen und ich verstehe nicht was zu tun: D vielen Dank eine Million Mann wirklich vielen Dank –

Gut zu helfen :) Ich habe eckige-chart.js vor und mag es sehr. Hoffentlich wird es aktualisiert, um v2 von chart.js –

zu unterstützen Auch, wenn Sie eine Antwort hilfreich finden, bitte stimmen Sie es ab, indem Sie auf den Pfeil nach oben klicken, der links von der Antwort ist. Um eine Antwort zu akzeptieren, klicken Sie auf das Häkchen. –

Ihre Datenbindung ist falsch

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

Sie haben keine variable Chart-Daten noch Chart-Etiketten in dem Controller. Du hast sie anders benannt.

In der Tat sind die Attribute, die in umgekehrter Reihenfolge. Sollte chart-data = "data" chart-Etikett = "Labels"

Beispiel von http://jtblin.github.io/angular-chart.js/

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

Quelle

2016-05-10 16:04:24 yBrodsky

Wenn ich getan habe, was Sie empfohlen haben, fand ich diesen Fehler auf der Konsole: TypeError: (Zwischenwert) [e] ist keine Funktion bei d (angular-chart.min.js: 1) bei Object.fn (angular-chart.min.js: 1) bei r. $ digest (angular.js: 15896) bei r. $ apply (angular.js: 16160) bei angular.js: 1679 bei Object.e [wie Aufrufen] (angular.js: 4523) bei c (angular.js: 1677) bei yc (angular.js: 1697) bei Zd (angular.js: 1591) bei angular.js: 29013 (anonyme Funktion) @ –

und immer noch keine Sache angezeigt wird –

In HTML-Daten sein, = "chart-data" wäre chart-data = "data"

Quelle

2016-05-10 16:06:47

Fertig, aber immer noch nichts, in der Tat erschien ein Fehler, der ist: TypeError: (Zwischenwert) [e] ist keine Funktion bei d (angular-chart.min.js: 1) bei Object.fn (angular-chart.min.js: 1) bei r. $ digest (angular.js: 15896) bei r. $ apply (angular.js: 16160) bei angular.js: 1679 bei Object.e [als Aufruf] (angular.js: 4523) bei c (angular.js: 1677) bei yc (angular.js: 1697) bei Zd (angular.js: 1591) im Winkel.js: 29013 –

können Sie mir ein voll funktionierendes Beispiel einschließlich der erforderlichen Skripte in den Kopf geben, um es zu versuchen, aus irgendeinem Grund, denke ich, dass etwas nicht stimmt mit dem Code, aber mit den eingeschlossenen angular.js und den anderen Skripten , weil ich kein Problem in meinem Markup oder in meiner App finden kann, js –

umfasst ich diesen Fehler wurde immer während der Code versucht:

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

Es scheint ein Versionskonflikt ist, versucht, das gleiche mit meinem eigenen Projekt hat den gleichen Fehler bekommen. Bitte nehmen Sie V1.1.1 von Chart.js, wie bereits von @dustin beantwortet.

prüfen diese fiddle.

Quelle

2016-05-10 19:17:08 optimus

Angular-Chart.js es nicht das Diagramm

Antwort

Verwandte Themen