我在我的角度应用程序中使用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调用的值?
答案 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;
});
通过这种方法,您不必多次重绘图形。在我们在模板加载之前获取数据时,解析数据是最好的方法。