chart.jsグラフを再描画する

Question

私は最新のバージョンを取得するためにバワーを使用しようとすると、distフォルダにプルしないので、chart.js v2を使用していますが、それは別のものです問題。

私は、このプラグインのための角度ラッパーを作成してアプリケーションに取り込みました。あなたが見ることができるように

.controller('ChartController', function() { 
    var self = this; 

    // Create our chart 
    self.init = function (ctx, data, options, type) { 

     // Create our config 
     var config = angular.extend({}, { type: type || 'bar', data: data, options: options || {} }); 

     // Create our chart 
     self.chart = new Chart(ctx[0], config); 
    }; 
}) 

.directive('ngChart', function() { 
    return { 
     restrict: 'A', 
     controller: 'ChartController', 
     scope: { 
      data: '=ngChart', 
      type: '@', 
      options: '=' 
     }, 
     link: function (scope, element, attrs, controller) { 
      scope.$watch('type', function() { 
       controller.init(element, scope.data, scope.options, scope.type); 
      }); 
      scope.$watch('data', function() { 
       controller.init(element, scope.data, scope.options, scope.type); 
      }); 
     } 
    }; 
}); 

それは非常に簡単です： ラッパーはこのようになります。私のコントローラで 私はこの持っている：

self.reportType = 'raw'; 
self.reportTypes = [{ name: 'Raw data', type: 'raw' }, { name: 'Bar chart', type: 'bar' }, { name: 'Line chart', type: 'line' }]; 

をそして、私の見解で、私はこの持っている：タイプは生でない場合

<div class="inputs"> 
    <div class="portlet-input input-inline input-small"> 
     <select class="form-control" ng-model="controller.reportType" ng-change="controller.test()" ng-options="type.type as type.name for type in controller.reportTypes"> 
     </select> 
    </div> 
</div> 

<div ng-if="controller.list.length && controller.reportType !== 'raw'"> 
    <div class="form-group"> 
     <button class="btn btn-default" ng-print><i class="fa fa-print"></i> Print</button> 
    </div> 

    <canvas class="print-only screen-only" ng-chart="controller.chartData" type="{{ controller.reportType }}"></canvas> 
</div> 

現在、私が唯一のチャートを表示します。 行を選択すると、線図が描画されます。バーを選択すると、何も処理されません。 私はそれを再描画するためにあらゆる種類のものを試しましたが、うまくいかないようです。最新の提案は、（私はinitメソッドで行っている）configを拡張して、コピーを作成し、その設定コピーを使って新しいグラフを作成することでした。 これは機能しませんでした。

どのように私はそれを動作させることができます知っていますか？

Answer 1

私がデータを変更すると、チャートがそれ自身を描くことがわかりました。 だからこのことを念頭に置いて、私はこれに私のinitメソッドを変更：

// Create our chart 
self.init = function (ctx, data, options, type) { 

    // Create our config 
    var config = { type: type || 'bar', data: angular.copy(data), options: options || {} }; 

    // Create our chart 
    self.chart = new Chart(ctx[0], config); 
}; 

そして、それが働いて、それが正しく再描画します。 データが変更されたかどうかを確認する必要があるため、コピーを実行すると常に変更されているためです。