Question

我正在尝试使用nvd3（http://krispo.github.io/angular-nvd3/#/）绘制线图。图表在ng-repeat内。

HTML代码：

这里我将一个obj从数组传递给nvd3图，它可以绘制线图。我已经尝试将orderItem.forecast直接传递给nvd3而不是调用函数。

<div class="parent_div" ng-repeat="orderItem in array">
 <div class="col-md-4 overflow-graph">
  <nvd3 options="options" data="plotGraph(orderItem)" class="with-3d-shadow with-transitions" ng-cloak></nvd3>
 </div>
</div>

控制器代码：

我需要绘制图形的值存储在orderItem.forecast中。在plotGraph（）中，我将返回当前orderItem.forecast，从中绘制图形。

$scope.options = {
    chart: {
        type: 'lineChart',
        height: 250,
        margin: {
            top: 20,
            right: 20,
            bottom: 40,
            left: 55
        },
        x: function(d) {
            return d.converted_date },
        y: function(d) {
            return d.cases_count },
        xAxis: {
            axisLabel: 'Date',
            tickFormat: function(d) {
                return d3.time.format('%m-%d-%y')(new Date(d));
            }
        },
        yAxis: {
            axisLabel: 'Quantity',
            tickFormat: function(d) {
                return d;
            },
            axisLabelDistance: -10,
        }
    }
};

/*Random Data Generator */
$scope.plotGraph = function(orderItem) {

    //Line chart data should be sent as an array of series objects.
    return [{
        values: orderItem.forecast, //values - represents the array of {x,y} data points
        key: orderItem.plu_code.commodity, //key  - the name of the series.
        color: '#ff7f0e', //color - optional: choose your own line color.
        strokeWidth: 2,
        classed: 'dashed'
    }];
};

绘制图表后，我会收到一个错误，这会导致浏览器冻结几次，或浏览器响应缓慢。

angular.js：10126错误：[$ rootScope：infdig] 10 $ digest（）迭代达成。中止！

感谢。

Answer 1

您每次都会返回一个新数组。 Angular不检查数组的内容以确保它已更改。

Angular将检查某些内容是否已更改，如果某些内容发生了更改，将触发$ digest。在你的情况下，因为你总是要返回一个新的数组，Angular将继续触发一个新的$ digest，并且如果$ digest循环被连续10次调用它会强制停止并抛出该错误。

在你的情况下，你想创建一个创建你想要的数组的函数，而不是有一个单独的函数来检索创建的数组。

您的案例中的问题函数是plotGraph函数

Answer 2

你能否检查你的回报中的所有值（在plotgraph方法中）不为null，我猜它在哪里它会带来null并且迭代停止。

再尝试一次修复，在ngrepeat中尝试按ID＆＃34添加＆＃34; orderItem在数组轨道中;

angular.js：10126错误：[$ rootScope：infdig] 10 $ digest（）迭代达成。中止！ nvd3 js出错

2 个答案: