如何在數據更新時更新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圖表

回答

相關問題