TypeError: this.scale undefinded when using Chart.js and Angularjs

Question

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

我的目标是为用户呈现每个图表的标题和加载微调器，然后在 REST 请求时加载图表 returns。这是我的 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);
                                });
                        }
                    });
            });
        });
     }
]);

这是我的 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>

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

TypeError: this.scale is undefined http://10.16.23.174:3000/lib/Chart.js/Chart.min.js Line 11

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

Answer 1

在你的 updateGraphWithData 函数中

data: chartjsDataPoints.yvalues,

应该是

data: [ chartjsDataPoints.yvalues ],

您可能还想尝试调换 $scope.graphs[i].showSpinner = false; 和 $scope.graphs[i].chartJsData = {

来源：Chart.js line 2686 Error

Answer 2

将我的 y 值放在方括号中就是答案。我现在正在渲染图表，没有任何问题。

谢谢！

TypeError: this.scale undefinded when using Chart.js and Angularjs

TypeError: this.scale undefinded when using Chart.js and Angularjs

javascript

angularjs

chart.js