饼图数据未通过 REST 调用更新答案

【问题标题】：Pie chart data not get updated over REST call饼图数据未通过 REST 调用更新
【发布时间】：2014-07-14 04:00:31
【问题描述】：

我在我的 Angular 应用程序中使用 d3 饼图，如下所示，

                      <nvd3-pie-chart
                                data="collectedData"
                                id="piechart1"
                                width="380"
                                height="420"
                                x="xFunction()"
                                y="yFunction()"
                                tooltips="true"
                                donut="true"
                                donutRatio=".015"
                                color="colorFunctionPie()">
                            <svg height="230"></svg>
                        </nvd3-pie-chart>

“collectedData”的值添加如下，

scope.collectedData=[{key:"one",y:10}];
scope.collectedData.push({key:"two",y:10});

这很好用，但是当我在这两个值之间使用 REST 调用来获取更多值时，如下所示，

for(var i=0;i<tenantNames.length;i++){
            resourceFactory.noOfClientsResource.get({reportDate:'2014-07-08',reportName:'Number of Clients',tenantIdentifier:tenantNames[i]},function (data) {
                scope.collectedData.push({key:data.tenantIdentifier,y:data.dataPointValues[0].dataPointValues[0]});

            });
            }

饼图只显示前两个值（“一”和“二”），但Console.log(scope.collectedData); 将打印所有四个值，包括来自 REST 调用的值。如何更新饼图数据，包括来自 REST 调用的值？

【问题讨论】：

你试过 scope.$apply() 吗？该请求可能超出了摘要周期的范围。
真的。范围.$apply();
它给出了一个错误提示“错误：[$rootScope:inprog] $digest 已经在进行中”
就在“scope.collectedData.push({key:data.tenantIdentifier,y:data.dataPointValues[0].dataPointValues[0]});”行之后

标签： angularjs d3.js pie-chart nvd3.js

【解决方案1】：

就像@Chann 所说，在您的scope.collectedData.push 行之后添加scope.$apply。

或者，在scope.$apply 中换行，如下所示：

scope.$apply(function () {
  scope.collectedData.push({key:data.tenantIdentifier,y:data.dataPointValues[0].dataPointValues[ 0]});
});

【讨论】：

【解决方案2】：

另一种方法是您可以在模板加载之前使用角度 routeProvider 参数解析获取数据。

获取初始数据

resolve: {
    initialData: function(newsControllerInitialData){
        return data;
    }
}

将初始数据输入图表

app.controller("appController", function ($scope, initialData) {
    $scope.collectedData = initialData;
});

通过这种方法，您不必多次重绘图表。最好的方法是解析数据，因为我们在加载模板之前就获得了数据。

【讨论】：