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

时间:2014-07-14 04:00:32

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

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

2 个答案:

答案 0 :(得分:1)

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

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

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

答案 1 :(得分:0)

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

获取初始数据

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

将初始数据提供给图表

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

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