Javascript TypeError:this.scale在使用Chart.js和Angularjs时未定义

我目前正在尝试创建一个仪表板，其中我有一组数据，我希望在一个页面上用小图表表示。到目前为止，我已经使用Chart.js和AngularJS完成了我的工作（我正在使用bower angular-Chart.js模块）。当我只想显示一个图表时，我在绘制数据图表方面没有问题，但当我尝试我的仪表板布局时，这就是我开始遇到问题的地方

我的目标是为用户提供每个图表的标题和加载微调器，然后在REST请求返回时加载图表。以下是我的Angularjs代码：

angular.module('core').controller('TrafficDashboardController', ['$scope', '$http', '$log',
function($scope, $http, $log) {
    var hostIpAddress = '10.16.23.174';
    $scope.serviceTypes = [];
    $scope.graphs = [];

    var buildChartjsArray = function(data) {
        var yvalues = [];
        var xvalues = [];
        $.each(data, function(key, value) {
            yvalues.push(Math.ceil(value.total));
            xvalues.push((new Date(value.timestamp)).toLocaleString());
        });

        return {
            xvalues: xvalues,
            yvalues: yvalues
        }
    };

    var updateGraphWithData = function(serviceTypeStr, categoryStr, data) {
        $log.info('ServiceType: ' + serviceTypeStr + ', Category: ' + categoryStr);
        for (var i=0; i < $scope.graphs.length; i++) {
            if ((serviceTypeStr == $scope.graphs[i].serviceType._id) && (categoryStr == $scope.graphs[i].category._id)) {
                var chartjsDataPoints = buildChartjsArray(data);
                $scope.graphs[i].chartJsData = {
                    labels: chartjsDataPoints.xvalues,
                    data: chartjsDataPoints.yvalues,
                    options: {
                        'pointDotRadius': 4,
                        'pointHitDetectionRadius': 4,
                        'datasetFill': false
                    }
                };
                $scope.graphs[i].showSpinner = false;
                break;
            }
        }
    };

    // Get all service types
    $http.get('http://' + hostIpAddress + ':8080/stats/api/serviceTypes')
        .success(function(data) {
            $scope.serviceTypes = data;

            // Loop through all service types, getting all the categories for each
            angular.forEach($scope.serviceTypes, function(serviceType) {

                var url = 'http://' + hostIpAddress + ':8080/stats/api/categories?serviceType=' + serviceType._id;
                $http.get(url)
                    .success(function(categories) {
                        categories.sort();
                        for (var i=0; i < categories.length; i++) {
                            var category = categories[i];
                            var graph = {
                                serviceType: serviceType,
                                category: category,
                                showSpinner: true
                            };
                            $scope.graphs.push(graph);

                            var url = 'http://' + hostIpAddress + ':8080/stats/api?serviceType=' + serviceType._id + '&category=' + category._id + '&period=1hour';
                            $http.get(url)
                                .success(function(data) {
                                    updateGraphWithData(data.serviceType, data.category, data.data);
                                });
                        }
                    });
            });
        });
     }
]);

angular.module（'core'）.controller（'TrafficDashboardController'，['$scope'，'$http'，'$log'，'，
函数（$scope、$http、$log）{
var hostIpAddress='10.16.23.174'；
$scope.serviceTypes=[]；
$scope.graphs=[]；
var buildChartjsArray=函数（数据）{
var yvalues=[]；
var xvalues=[]；
$。每个（数据、函数（键、值）{
推（Math.ceil（value.total））；
xvalues.push（（新日期（value.timestamp））.toLocaleString（））；
});
返回{
xvalues:xvalues，
Y值：Y值
}
};
var updateGraphWithData=函数（serviceTypeStr、categoryStr、data）{
$log.info（'ServiceType:'+serviceTypeStr+'，Category:'+categoryStr'）；
对于（变量i=0；i<$scope.graphs.length；i++）{
if（（serviceTypeStr==$scope.graphs[i].serviceType.id）和&（categoryStr==$scope.graphs[i].category.id））{
var chartjsDataPoints=buildChartjsArray（数据）；
$scope.graphs[i].chartJsData={
标签：chartjsDataPoints.xvalues，
数据：chartjsDataPoints.yValue，
选项：{
“pointDotRadius”：4，
“pointHitDetectionRadius”：4，
“数据集填充”：false
}
};
$scope.graphs[i].showSpinner=false；
打破
}
}
};
//获取所有服务类型
$http.get（'http://'+hostIpAddress+'：8080/stats/api/serviceTypes'））
.成功（功能（数据）{
$scope.serviceTypes=数据；
//循环浏览所有服务类型，获取每个服务类型的所有类别
angular.forEach（$scope.serviceTypes，function（serviceType）{
var url='http://'+hostIpAddress+'：8080/stats/api/categories？serviceType='+serviceType.\u id；
$http.get（url）
.成功（职能（类别）{
categories.sort（）；
对于（变量i=0；i

这是我的HTML：

<section data-ng-controller="TrafficDashboardController">
<div class="col-sm-6" ng-repeat="graph in graphs">
    <h6>{{graph.serviceType.name}}</h6>
    <h6>{{graph.category.name}}</h6>
    <fading-circle-spinner ng-show="graph.showSpinner"></fading-circle-spinner>

    <canvas ng-hide="graph.showSpinner" class="chart chart-line" data="graph.chartJsData.data" labels="graph.chartJsData.labels" options="graph.chartJsData.options"></canvas>
</div>
</section>

{{graph.serviceType.name}
{{graph.category.name}

当我运行代码时，我得到了标题和微调器，正如预期的那样，但随后我得到了以下错误：

TypeError:此.scale未定义 第11行

---

如果您有任何帮助或建议，我们将不胜感激。

在您的updateGraphWithData函数中

数据：chartjsDataPoints.yValue

应该是

data: [ chartjsDataPoints.yvalues ],

---

您可能还想尝试交换

$scope.graphs[i].showSpinner=false；

和您的

$scope.graphs[i].chartJsData={

---

信用证：

答案是在我的Y值周围加上方括号。我现在绘制的图形没有任何问题

---

谢谢！

顺便说一句，我不认为这是唯一的问题（我得到了一个不同的错误）。您介意尝试一下上面的更改和Chart.js的非精简版本吗？也许还有静态数据（最好是小提琴：-））？