Question

我正在尝试从userTemplate对象创建动态图表。我正在使用这个指令angular-flot，我想要动态创建数据集和指令选项。它的工作，但我有这个错误

Error: [$rootScope:infdig] http://errors.angularjs.org/1.2.21/$rootScope/infdig?p0=10&p1=%5B%5B%22fn%3…ection%5C%22%3A%7B%5C%22color%5C%22%3A%5C%22%2354728c%5C%22%7D%7D%22%5D%5D
    at Error (native)
    at http://mwm3-gui/asset/script/vendor/angular2.1/angular.min.js:6:450
    at k.$get.k.$digest (http://mwm3-gui/asset/script/vendor/angular2.1/angular.min.js:110:66)
    at k.$get.k.$apply (http://mwm3-gui/asset/script/vendor/angular2.1/angular.min.js:112:173)
    at http://mwm3-gui/asset/script/vendor/angular2.1/angular.min.js:122:253
    at e (http://mwm3-gui/asset/script/vendor/angular2.1/angular.min.js:37:440)
    at http://mwm3-gui/asset/script/vendor/angular2.1/angular.min.js:41:120

HTML

<div  ng-repeat="panel in row.panels" class="{{panel.columnClass}}" resizable id="{{panel.id}}" r-directions="['right']">
     <flot dataset="getDataForChart(panel)" options="getOptionForChart(panel)"  height="{{panel.graph.height}}"></flot>
</div>

CONTROLLER

$scope.userTemplate = [
                        {
                            blockId: 'blockUno',
                            title: 'Block title',
                            rows: [
                                {
                                    rowId: 'rowUno',
                                    title: 'Row Title 1',
                                    panels: [
                                        {
                                            id: 'palel-report-1',
                                            title: 'uno',
                                            columnClass: 'col-md-4',
                                            graph: {
                                                height: 250,
                                                type: "BAR",
                                                countBy: "status"
                                            }
                                        },
                                        {
                                            id: 'palel-report-2',
                                            title: 'due',
                                            columnClass: 'col-md-4',
                                            graph: {
                                                height: 250,
                                                type: "PIE",
                                                countBy: "status"
                                            }
                                        },
                                        {
                                            id: 'palel-report-3',
                                            title: 'tre',
                                            columnClass: 'col-md-4',
                                            graph: {
                                                height: 250,
                                                type: "BAR",
                                                countBy: "status"
                                            }
                                        }
                                    ]
                                }
                            ],
                            tables: []
                        }
    ];

    $scope.getDataForChart = function(panel) {
      var graphData = [];
      var countBy = panel.graph.countBy;
      var arr = $scope.reportingData;
      for (var i = 0; i < arr.length; i++) {
          var valueOfkey = arr[i][countBy];
          graphData.push(valueOfkey);
      }
      var a = [], b = [], prev;
      graphData.sort();
      for (var i = 0; i < graphData.length; i++) {
          if (graphData[i] !== prev) {
              a.push(graphData[i]);
              b.push(1);
           } else {
              b[b.length - 1]++;
           }
           prev = graphData[i];
         }

        var graphData = [];
        for (var i = 0; i < a.length; i++) {
          var singleO = {label: '' + a[i], data: [[i, b[i]]]};
          graphData.push(singleO);
        }
        return graphData;
    };

    $scope.getOptionForChart = function(panel) {
        var options = angular.copy($scope.defaultPlotOptions);
        var typeGraph = panel.graph.type;
        switch (typeGraph) {
            case "BAR":
            options.series.bars.show = true;
            break;
            case "LINE":
            options.series.lines.show = true;
            break;
            case "PIE":
            options.series.pie.show = true;
            break;
            case "POINT":
            options.series.points.show = true;
            break;
            case "TABLE":
            break;
        }
        return options;
    };

Answer 1

你得到的错误来自无限的摘要循环。

在某些地方，您每次都会调用返回新项目的函数。以下是您收到的错误消息中链接的docs示例，表明这可能会导致此错误：

一个常见错误是绑定到生成新函数的函数每次调用时都有数组。例如：

<div ng-repeat="user in getUsers()">{{ user.name }}</div>

$scope.getUsers = function() {   return [ { name: 'Hank' }, { name: 'Francisco' } ]; };

因为getUsers（）返回一个新数组，Angular 确定每个$摘要周期的模型是不同的，导致错误。解决方案是返回相同的数组对象，如果元素没有改变：

var users = [ { name: 'Hank' }, { name: 'Francisco' } ];

$scope.getUsers = function() {   return users; };

在您的代码中，您对getDataForChart和getOptionForChart执行相同的绑定。

动态角度图表

1 个答案: