Angular Charts - nicht in der Lage, Daten zu lesen

Question

Erste Mal mit chart.js und ich habe ein Problem des Diagramms nicht in der Lage, die Daten aus dem Modell zu lesen.

Früher hatte ich einen Fehler von Error: $injector:modulerr Module Failed to instantiate module chart.js. Dies wurde gelöst, indem die Abhängigkeit von chart.js zu angularCharts geändert wurde, obwohl die Mehrheit (nahe genug) chart.js verwendet. Ich habe die erforderlichen Controller und Eigenschaften/Werte geschrieben, aber der Graph wird die Daten nicht lesen.

Nicht sicher, was das Problem ist, ob es sein wird, verwende ich die falsche Abhängigkeit (angularCharts) oder Problem mit der $scope. Irgendwelche Ideen?

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-charts/0.2.7/angular-charts.min.js"></script> 

<div class="col-md-6 text-xs-center" ng-controller="LineCtrl"> 
    <h2>Cost Analysis</h2> 
    <canvas class="chart chart-line" chart-data="data" chart-labels="labels" 
    chart-series="series" chart-click="onClick"></canvas> 
</div> 

---

var app = angular.module('myApp', ['ngRoute', 'angularMoment', 'ui.router', 'angularCharts']); 

app.controller("LineCtrl", ['$scope', '$timeout', function ($scope, $timeout) { 

    $scope.labels = ["January", "February", "March", "April", "May", "June", "July"]; 
    $scope.series = ['Series A', 'Series B']; 
    $scope.data = [ 
    [65, 59, 80, 81, 56, 55, 40], 
    [28, 48, 40, 19, 86, 27, 90] 
    ]; 
    $scope.onClick = function (points, evt) { 
    console.log(points, evt); 
    }; 

    // Simulate async data update 
    $timeout(function() { 
    $scope.data = [ 
     [28, 48, 40, 19, 86, 27, 90], 
     [65, 59, 80, 81, 56, 55, 40] 
    ]; 
    }, 3000); 

}]) 

Answer 1

Sie sind die falsche Bibliothek importieren.

Sie haben angular-charts importiert unter https://github.com/chinmaymk/angular-charts.

Aber Sie verwenden Richtlinien, die ein Teil von angular-chart befinden sich in http://jtblin.github.io/angular-chart.js/

Sie zunächst korrekt waren, als Sie wurden einschließlich der chart.js Abhängigkeit, Sie haben gerade die falsche Bibliothek.

angular.module('myModule', ['chart.js']); 

Hier ist eine funktionierende Version des Codes: https://plnkr.co/edit/tUsMwgOBcFJrV1xTMcF0?p=preview