2016-07-21 5 views
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でデータの変化を見ることができました。しかし、私が手動でページをリフレッシュするまで、サンバーストチャートはまったく更新されません。

+0

config="{refreshDataOnly: false}"あなたはそのためplunkerを準備してもらえますか? Angular/NVD3を使用して私のフォークを実行することができます:http://plnkr.co/N6lWYU – Atais

+0

バックエンドのデータが変更されたときに信号を送信するサービスがあります。コントローラが信号を受け取ると、関数 'grabData()'が呼び出され、 '$ scope.data'が更新されます。 HTMLはデータを反映します。つまり、 '$ scope.data'は変更されましたが、グラフは更新されません。コードは上記のとおりです! @Atais – ThatBird

+0

'deepWatchData:true'はトリックを行い、グラフを更新する必要があります。そうではありません。だからこそ、問題をプランカードで再現しようとするべきです。このアプローチでは、問題を切り分けます。この問題は、アプリケーション内の別の場所にある可能性があります。 – Atais

答えて

1

修正がかなり簡単だったので、refreshDataOnly:falseを渡す必要があります。あなたの設定 -

<nvd3 options="options" data="sunburst" config="{refreshDataOnly: false}" class="with-3d-shadow with-transitions"></nvd3>

関連する問題