Question

我在我的角度应用程序中使用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>

＆＃34; collectData＆＃34;的值添加如下，

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]});

            });
            }

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

Answer 1

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

或者，将所述行包装在scope.$apply中，如下所示：

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

Answer 2

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

获取初始数据

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

将初始数据提供给图表

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

通过这种方法，您不必多次重绘图形。在我们在模板加载之前获取数据时，解析数据是最好的方法。

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

2 个答案: