Angular Charts.js: Diagramm kann nicht mit Daten aktualisiert werden

Question

Ich bin neu in Diagrammen/eckig, und es ist eine lange Zeit seit ich Javascript verwendet. Ich versuche, eine Fabrik in Angular zu verwenden, um Daten von einem Server abzufangen und sie zu verwenden, um ein Diagramm zu füllen (das Angular Charts verwendet, ein Wrapper um Charts.js). Ich kann es ursprünglich mit gefälschten Daten füllen, aber wenn ich es überhaupt ändere, wird das Diagramm leer. Habe ich hier ein Scoping-Problem? Hier ist der relevante Code:

.controller("LineCtrl", ["$scope", "HRDataPointFactory", function ($scope, HRDataPointFactory) { 

     //The following lines cause the chart to populate, but obviously I dont care about this fake data. 
     //$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); 
     }; 


     $scope.data = [[]]; 
     $scope.labels = []; 
     $scope.series = ["Department"]; 

     $scope.getData = function() { 
      HRDataPointFactory.getData($scope.department, $scope.dt1, $scope.dt2) 
       .then(function (data) { 

        var i; 
        for (i = 0; i < data.data.length; i++) { 
         $scope.data[0].push(data.data[i].EmployeeCount); 
        } 

        for (i = 0; i < data.data.length; i++) { 
         $scope.labels.push(data.data[i].Date); 
        } 

       }); 
     } 

     /*unrelated stuff here*/ 
    } 
]) 
.factory("HRDataPointFactory", function HRDataPointFactory($http) { 
    var exports = {}; 

    exports.getData = function(deptKey, start, end) { 
     var config = { 
      params: { departmentKey: deptKey, startTime: start, endTime: end } 
     } 

     return $http.get("/HR/Data", config) 
      .then(function(response) { 
       console.log(response); 
       return response; 
      },function(data) { 
       console.log("There was an error!", data); 
       return response; 
      }); 
    }; 

    return exports; 
}); 

Und die html:

<canvas id="line" class="chart chart-line" chart-data="data" 
     chart-labels="labels" chart-legend="true" chart-series="series" 
     chart-click="onClick"> 
</canvas> 

Vielen Dank für die Hilfe!

Answer 1

Ich habe eine Plunker with a working example erstellt. Um zu vereinfachen, ziehe ich nur die Daten (nicht die Etiketten, etc.), aber das ist einfach zu vervollständigen.

Im Controller geben wir vm diesem und in der Funktion getData I referenziere vm.data. Bevor Sie $ scope hatten, ist das ein anderer $ scope in der Funktion, den Sie als leeres Array zuweisen.

.controller('MyCtrl', ['$scope', 'HRDataPointFactory', function($scope, HRDataPointFactory) { 
     var vm = this; 
     //The following lines cause the chart to populate, but obviously I dont care about this fake data. 
     vm.labels = ["January", "February", "March", "April", "May", "June", "July"]; 
     vm.series = ["Series A", "Series B"]; 
//  vm.data = [ 
//  [65, 59, 80, 81, 56, 55, 40], 
//  [28, 48, 40, 19, 86, 27, 90] 
//  ]; 
     vm.onClick = function(points, evt) { 
     console.log(points, evt); 
     }; 

     vm.data = [ 
     [] 
     ]; 
     vm.getData = function() { 
     HRDataPointFactory.getData($scope.department, $scope.dt1, $scope.dt2) 
      .then(function(success) { 
      console.log(JSON.stringify(success)); 
      vm.data = success.data; 

      }); 
     } 
     vm.getData(); 

     /*unrelated stuff here*/ 
    }]) 

ich in der Konsole drucken Sie die Daten, die ich erhalten:

{"data":[[65,59,80,81,56,55,40],[28,48,40,19,86,27,90]],"status":200,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"params":{},"url":"data","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":""} 

Die Daten auf Plunker auch gehostet wird dies als Format:

[ 
    [65, 59, 80, 81, 56, 55, 40], 
    [28, 48, 40, 19, 86, 27, 90] 
] 

Bitte nicht, dass ich auch verwendet die "Controller as" -Syntax im HTML, um Best Practices einzuhalten ... siehe john papa's article on this subject.

<div ng-controller="MyCtrl as vm"> 
<canvas id="line" class="chart chart-line" chart-data="vm.data" 
     chart-labels="vm.labels" chart-legend="true" chart-series="vm.series" 
     chart-click="onClick"> 
</canvas> 

    </div> 

Lassen Sie uns wissen.