AngularJS + Jquery Gantt - 複数のグラフ

Question

私はangularJsを使用してWebアプリケーションを作成していますが、ガントチャートを表示する必要があります。私はjquery-ganttプラグインを使用していますが、1つのグラフしか表示されていない場合でもうまく動作しますが、2つ以上表示したい場合でも同じソースがあるようです。

<chronogramme source="$ctrl.firstSource"></chronogramme> 
<chronogramme source="$ctrl.secondSource"></chronogramme> 

（$のCTRLが「controllerAs」と定義され、私のコントローラのための私の別名である）

たとえば、私は「secondSource」を更新したときに、最初のグラフは、同じものをあまりにも更新して表示されます二つ目。

複数のグラフを作成することは可能ですか？

おかげ

---

UPDATE： 問題はjQueryのガントのためのセレクタは、すべてシングルチャートに影響を与えるので、私は（それになります、それは他の人を助けことができれば、ここにこれを入れ、ここになければなりません） "chronogramme" directive：

app.directive("chronogramme", function(){ 
return { 
    restrict: 'E', 
    replace: true, 
      scope: { 
       source: '=source', 
       minScale: '=?minScale', 
       scale: '=?scale', 
       onItemClick: '=onItemClick', 
       onTitleClick: '=onTitleClick' 
      }, 
    template: '<div class="gantt"></div>', 
    link: function(scope, element, attrs){ 
       if (!scope.minScale) { scope.minScale = 'months'; } 
       if (!scope.scale) { scope.scale = 'months'; } 
       scope.$watch('source', function(){ 
        $(".gantt").gantt({ 
         source: scope.source, 
         navigate: "scroll", 
         minScale: scope.minScale, 
         scale: scope.scale, 
         itemsPerPage: 20, 
         waitText: "Chargement...", 
         months: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"], 
         dow: ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"], 
         scrollToToday: true, 
         onItemClick: function(data) { 
          scope.onItemClick(data); 
         }, 
         onTitleClick: function(data) { 
          scope.onTitleClick(data); 
         } 
        }); 
     }); 
    } 
}; 

}）;

Answer 1

ディレクティブは、プラグインを呼び出すためにクラスセレクタを使用している：

template: '<div class="gantt"></div>', 
link: function(scope, element, attrs){ 
      if (!scope.minScale) { scope.minScale = 'months'; } 
      if (!scope.scale) { scope.scale = 'months'; } 
      scope.$watch('source', function(){ 
       ̶$̶(̶"̶.̶g̶a̶n̶t̶t̶"̶)̶.̶g̶a̶n̶t̶t̶(̶{̶ 
       element.gantt({ 

代わりのクラスを持つすべての要素にプラグインを呼び出しますgantt、ディレクティブに固有の要素でそれを呼び出します。

また、指示文replaceも廃止予定です。指令がng-repeatで使用されると、問題を引き起こす可能性があります。

Answer 2

Angular Ganttを使用すると、明らかに問題が解決します。ライブラリ内のganttディレクティブのコードを確認することができます。これは非常に複雑で、jqueryバージョンのライブラリを使用してアプリケーションに作成する時間を費やす必要はありません。したがって、ganttディレクティブを使用すると、同じビューで複数のチャートを持つことができます。 （もちろん、独立したスコープで作成されています）。ここで、異なるデータセットと同じビュー上の2つのグラフの一例は次のとおりhttps://plnkr.co/edit/lyBH7ZnZ5PgThqe46YKk?p=preview