如何在数据更新时更新D3图表

-1

我正在使用D3图表在屏幕上显示数据。数据从WebApi更新。一旦数据更新，我想刷新图表中的数据。如何在数据更新时更新D3图表

这里是代码

$scope.config = { 
     title: 'Products', 
     tooltips: true, 
     labels: false, 
     mouseover: function() { }, 
     mouseout: function() { }, 
     click: function() { }, 
     legend: { 
      display: true, 
      //could be 'left, right' 
      position: 'right' 
     } 
    }; 


$http.put(WebApiURL.GetWebApiURL() + 'api/ReportPerformance', data) 
    .then(function (response) { 
     $scope.PerformanceData = response.data; 
     $scope.LoadingData = ""; 
     $scope.chartdata = []; 
     var tempchartdata = []; 
     angular.forEach($scope.PerformanceData, function (value) { 
      tempchartdata.push(value.ReportTimeInSeconds); 
     }); 
     $scope.chartdata = tempchartdata; 
    }), function errorCallback(x, y, z) { 
     $scope.LoadingData = "Error while generating report:= " + x.ExceptionMessage; 
    }; 
    }

本网站的呼叫更新数据$scope.chartdata。在HTML

图表定义...

<div data-ac-chart="'bar'" 
    data-ac-data="chartdata" 
    data-ac-config="chartConfig" 
    style="height: 500px; width: 500px;" 
    class="chart"> 
</div>

但是，当数据来自的WebAPI，正在更新$scope.chartdata但它不反映在屏幕上。

新增plunker ...... http://plnkr.co/edit/a0mVRL0Jo9ah8Om8ONTc

来源

2017-06-19 Abhash786

你能提供小提琴吗？ – MehulJoshi

您需要将绘制/更新图表的代码放在'$ http.put'回调中，或者添加'$ scope。$ watch'并放在那里。你能展示实际制作图表的代码吗？ – Razzildinho

这是绘制图表的实际代码。你能否指点我一些例子来说明你的建议。 – Abhash786

你应该看在你的指令的$scope.dataAcData和更新D3在

scope.$watch('dataAcData',function(){ 
    //update your d3 here 
})

来源

2017-06-19 08:39:48

我还没有为图表创建任何指令。我只是直接使用D3提供的任何东西，如我的问题 – Abhash786

中提到的那样，它应该有一个指令，或者你在哪里绑定你的$ scope.chartdata？你的d3代码在哪里？ –

新增plunker ... – Abhash786

尝试应用的方法，我的事了，现在更新，因为，$消化不工作在你的代码中。包裹你的代码

$scope.$apply(function() { 
      //your code 
     }); 




$scope.$apply(function() { 
      $scope.dataAcData 
     }); 

go through http://jimhoskins.com/2012/12/17/angularjs-and-apply.html link, Hope it will help you

来源

2017-06-19 09:04:20

以获得更多详细信息，请访问 –

http://jimhoskins.com/2012/12/17/angularjs-and-apply.html –

如何在数据更新时更新D3图表

回答

相关问题