Angularjs - Charts.js：他のビューで同じチャート要素が再描画されない

Question

私は最初の指示文を作成しようとすると、angularjsを初めて使う人です。私は自分のアプリケーションにCharts.js2.0（beta）をロードする命令を作成しています。

私はangular-routeによって管理されている2つのビューを持っています。両方のHTMLビューには、charts-elementだけを含むHTMLページが含まれています。

問題は最初のページが適切にチャートを描画していることです。グラフのdivがロードされているにもかかわらずチャートが再描画されていないためです。そして今私は最初にその空白を見るために戻る。

私が間違っているのは何Plunker

へのリンク？私の指示に問題はありますか？

ありがとうございます。

Answer 1

を解決するのに役立ちます願っています。私は実際にそれをやっているダウントレースすることはできませんが、ここではあなたのための修正です：ここではhttp://plnkr.co/edit/jDQFV62FSeXAQJ6o7jE8

あなたは

以上

scope.$watch('config', function(newVal) { 
    if(angular.isDefined(newVal)) { 
     if(charts) { 
     charts.destroy(); 
     } 
     var ctx = element[0].getContext("2d"); 
     charts = new Chart(ctx, scope.config); 
     //scope.$emit('create', charts); 
    } 
    }); 

を持っていたもので、あなたが直接にscope.configを渡していることがわかりますグラフメソッド。何らかの形でデータを変更しているように見えますが、それは参照渡しのため実際には$rootScope.sales.chartsを変更しています。そのオブジェクトをコピーして、以下のようにローカルで使用すると、その問題は発生しません。

ここで私はそれを修正しました。

scope.$watch('config', function(newVal) { 
    var config = angular.copy(scope.config); 
    if(angular.isDefined(newVal)) { 
     if(charts) { 
     charts.destroy(); 
     } 
     var ctx = element[0].getContext("2d"); 
     charts = new Chart(ctx, config); 
     //scope.$emit('create', charts); 
    } 
    }); 

あなたは私たちがコピー（angular.copy()）を作るために、角度を使用し、それは私たちが渡したオブジェクトだ、代わりに直接、そのオブジェクトを渡すことがわかります。あなたが放出されるの作成イベントを処理している

Answer 2

あなたが描いているキャンバスのイドとの関係があると思います。私は別のビューで2つのグラフのキャンバスに同じIDを使用していたので、この問題もあまりにもありました。これらのIDが異なること、および各グラフのjavasrciptが各ビューのコントローラ内にあるか、各ビュー自体にあることを確認してください。

あなたのplukerを見てみると、同じhtmlをグラフに使用していることがわかります。あなたのビューから別のビューに角度が移動したときに、グラフが既に描画されていると思うと思います。 2つのグラフを区別することで問題は解決されます。私は、グラフのキャンバスに同じhtmlを使用することを可能にする他のアプローチがあるかどうかはわかりません。

は、チャートライブラリはルートスコープ上の既存のオブジェクトを変更し、それによって、その後永遠にそれを無視して問題があるようで、あなたがそれを