javascript - Angular Charts.js : Can't refresh chart with data

Question

我是图表/Angular 新手，自从我使用 JavaScript 以来已经很长时间了。我正在尝试使用 Angular 中的工厂从服务器获取数据并使用它来填充图表(它使用 Angular Charts，Charts.js 的包装器)。我最初可以用假数据填充它，但更改它会导致图表变为空白。我这里有某种范围界定问题吗？相关代码如下:

 .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;
});

和 html:

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

感谢您的帮助!

Answer 1

我创建了一个Plunker with a working example 。为了简化，我只提取数据(不是标签等)，但这很容易完成。

在 Controller 中，我们将 vm 分配给它，并在函数 getData 中引用 vm.data。在您拥有 $scope 之前，它是函数中与您分配为空数组的 $scope 不同的 $scope。

    .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*/
    }])

我在控制台中打印我收到的数据:

{"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":""}

数据也托管在 plunker 上，使用以下格式:

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

请注意，我还在 HTML 中使用了“Controller as”语法以尊重最佳实践...请参阅 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>

请告诉我们。