Question

我正在尝试在Angular JS中使用Morris JS图表，这是我的代码。

我在控制台中收到错误，指向“新Morris.Line（{”行。我该怎么办？谢谢。

Reporting.directive('ngMorrison', function() {
    return {
        //require: '^ngModel',
        scope: {
          ngModel: '='
        },
        template: '<div id="call-chart" class="graph">test</div>',
        controller: ['$scope', '$http', '$q', function($scope, $http, $q) {
          $scope.getCalls = function() {
            var defer = $q.defer();
            $http({method: 'GET', url: '/dashboard/'}).
                success(function (data, status, headers, config) {
                    defer.resolve(data);
                }).error(function (data, status, headers, config) {
                    defer.reject(status);
                });
            return defer.promise;
          }
        }],
        link: function(scope, iElement, iAttrs, ctrl) {
            calls = scope.getCalls();
            // get list of users
            new Morris.Line({
              // ID of the element in which to draw the chart.
              element: "call-chart",
              // Chart data records -- each entry in this array corresponds to a point on
              // the chart.
              data: [
                { year: '2008', value: 20 },
                { year: '2009', value: 10 },
                { year: '2010', value: 5 },
                { year: '2011', value: 5 },
                { year: '2012', value: 20 }
              ],
              // The name of the data record attribute that contains x-values.
              xkey: '{year}',
              // A list of names of data record attributes that contain y-values.
              ykeys: ['value'],
              // Labels for the ykeys -- will be displayed when you hover over the
              // chart.
              labels: ['Value']
            });
        }
    };
});

这是我在查看控制台时遇到的错误：

TypeError: Cannot call method 'match' of undefined
    at Object.t.parseDate (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), <anonymous>:1:9523)
    at n.eval (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), <anonymous>:1:3297)
    at n.t.Grid.r.setData (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), <anonymous>:1:3888)
    at n.r (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), <anonymous>:1:1680)
    at new n (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), <anonymous>:1:11953)
    at link (http://localhost:8000/static/js/app/directives/directives.js:59:23)
    at j (http://localhost:8000/static/js/libs/angular/angular.min.js:43:157)
    at e (http://localhost:8000/static/js/libs/angular/angular.min.js:38:463)
    at e (http://localhost:8000/static/js/libs/angular/angular.min.js:38:480)
    at e (http://localhost:8000/static/js/libs/angular/angular.min.js:38:480) <div ng-morrison="" class="ng-isolate-scope ng-scope"> angular.min.js:61

Answer 1

当Morris遇到xkey属性问题时，会出现错误。将xkey值从{year}更改为'year'，这应该可以修复它。

玩这个例子： http://jsbin.com/uqawig/2139/edit

“TypeError：无法在Angular JS指令中调用未定义的方法'匹配'”Morris JS

1 个答案: