2016-09-16 9 views
0

サービスからデータを取得します。プルされたデータには、y軸(someDatasomeOtherData)の間で切り替える2つのプロパティがあります。データが変更されていない場合のNVD3 - 再描画/更新チャート

y: function(d){ return $scope.mode === '1' ? d.someData : d.someOtherData; } 

これは私のディレクティブのコントローラです:アイデアは私の親コントローラでのクリックイベントに基づいて、チャートが私のy軸(どちらかsomeDataがまたはsomeOtherData)上の別のプロパティを表示することです。

controller: function($scope, Chart) { 
     $scope.data = []; 
     $scope.data = Chart.testPortfolio(); // I only want data to be fetched once as it doesn't changes 

     $scope.update = function() { 
      //$scope.data = Chart.testPortfolio(); <-- if this line is uncommented it works, but I don't want to fetch data on every click event 
      $scope.pieOptions = { 
       chart: { 
        type: 'pieChart', 
        height: 400, 
        x: function(d){ return d.name; }, 
        y: function(d){ return $scope.mode === '1' ? d.someData : d.someOtherData; }, 
        showLabels: false, 
        labelThreshold: 0.01 
       } 
      }; 
     } 
     $scope.update(); 

     // this listens to my click event for switching 
     $scope.$on('some-event', function(e, args) { 
      $scope.mode = args.mode; 
      $scope.update(); 
     }); 
    } 

そして、このディレクティブのhtmlです:私はデータ私はプロパティを切り替えするたびに再フェッチ場合は、次のコードは、私がやりたいだろう

<nvd3 options='pieOptions' data='data'></nvd3> 

をどのようにすることができますy軸のプロパティを切り替えるたびにデータを再フェッチしなくても、グラフを再描画/更新できますか?

答えて

0

私は以下の解決策を考え出しました。これは、ハックのようなものです。ですから、より良い提案があればお知らせください:

 controller: function($scope, Chart, $interval) { 
     $scope.data = []; 
     $scope.pieOpts = { 
      chart: { 
       type: 'pieChart', 
       height: 400, 
       x: function(d){ return d.name; }, 
       y: function(d){ return $scope.mode === '1' ? d.someValue: d.someOtherValue; }, 
       showLabels: false, 
       labelThreshold: 0.01 
      } 
     }; 

     $scope.data = Chart.testPortfolio(); 

     $scope.$on('some-event', function(e, args) { 
      if(args.mode !== $scope.mode) { 
       $scope.mode = args.mode; 

       var tempData = angular.copy($scope.data.reverse()); 

       $interval(function() { 
        $scope.data = []; 
        while((a=tempData.pop()) != null){ 
         $scope.data.push(a); 
        } 
       }, 1, true); 
      } 
     }); 
    } 
関連する問題