动态角度图

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> 

控制器

$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从您收到表明，这可能会导致该错误的错误消息链接的例子：

One common mistake is binding to a function which generates a new array every time it is called. For example:

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

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

Since getUsers() returns a new array, Angular determines that the model is different on each $digest cycle, resulting in the error. The solution is to return the same array object if the elements have not changed:

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

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

在代码中，你正在做同样的结合getDataForChart和getOptionForChart。