TypeError：使用Chart.js和Angularjs時this.scale未定

Question

我目前正在嘗試創建一個各種各樣的儀表板，我有一組數據集，我想在一個頁面上的小圖表中表示。 到目前為止，我已經完成了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);
                                });
                        }
                    });
            });
        });
     }
]);

這是我的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未定義http://10.16.23.174:3000/lib/Chart.js/Chart.min.js第11行

任何幫助或建議將不勝感激。

Answer 1

在你的updateGraphWithData函數中

data：chartjsDataPoints.yvalues，

應該

data: [ chartjsDataPoints.yvalues ],

---

您可能還想嘗試交換$scope.graphs[i].showSpinner = false; 和你的$scope.graphs[i].chartJsData = {

信用： Chart.js第2686行錯誤

Answer 2

將方括號放在我的yvalues周圍就是答案。 我現在正在渲染圖形而沒有任何問題。

謝謝！