1
사용 사례 : 데이터가 api에서 변경되면 $scope.data도 변경됩니다. 나는 html로 데이터 변경을 볼 수 있었다. 햇살 차트 업데이트가 예상됩니다.
여기 핵심 코드 :
컨트롤러 :
var grabData=function(){
$http.get('someApi').then(function success(response){
$scope.options = {
chart: {
type: 'sunburstChart',
width:450,
height: 450,
color: d3.scale.category20c(),
duration: 250,
mode: 'size',
useInteractiveGuideline:true,
}
};
$scope.config = {
visible: true, // default: true
disabled: false, // default: false
refreshDataOnly: true, // default: true
deepWatchOptions: true, // default: true
deepWatchData: true, // default: true
deepWatchDataDepth: 2, // default: 2
debounce: 10 // default: 10
};
$scope.data = [];
$scope.data.push({"name":"PORTFOLIO", "children":response.data});
},function error(response){
$scope.all = response.statusText;
});};
HTML :
<div class="col-md-6 col-md-offset-1">
<nvd3 options="options" data="data" config="config" class="with-3d-shadow with-transitions"></nvd3>
</div>
문제 : 이제 때 API에서 데이터 변경, $scope.data 또한 변경됩니다. 나는 html로 데이터 변경을 볼 수 있었다. 그러나 햇살 차트 은 페이지을 수동으로 새로 고칠 때까지 전혀 업데이트되지 않습니다.
에서
config="{refreshDataOnly: false}"는 해당위한 plunker을 준비 할 수 있을까요? 이미 Angular/NVD3을 사용하여 광산을 포크 할 수 있습니다. http://plnkr.co/N6lWYU – Atais백엔드의 데이터가 변경되면 신호를 보내는 서비스가 있습니다. 컨트롤러가 신호를 받으면 함수'grabData()'가 호출되고'$ scope.data'가 업데이트됩니다. HTML은 데이터를 반영하기 때문에'$ scope.data'는 변경되었지만 차트는 업데이트되지 않습니다. 코드는 위와 같습니다! @Atais – ThatBird
'deepWatchData : true'는 트릭을 수행하고 그래프를 업데이트해야합니다. 그것은, 그래서 당신 plunker로 문제를 복제하려고 해야하는지 않습니다. 이 방법을 사용하면 문제를 격리 할 수 있습니다. 문제는 애플리케이션의 다른 부분 일 수 있습니다. – Atais