chart.jsはangular2（rc1）に表示されません

Question

chart.jsとangular2に問題があります。 キャンバスにチャートをバインドしようとすると、何も表示されません（角テンプレート内）。 角度の外側はすべて正常に動作します。 My StatisticComponentは、ルータ（ルータ出口）に含まれています。

コンポーネント：

@Component({ 
    selector: 'statistic', 
    templateUrl: 'views/statistic.component.html' 
}) 
class ChartComponent implements AfterViewInit { 
    @ViewChild('canvas') canvasElement; 

    ngAfterViewInit() { 
     var ctx = document.getElementById('canvas'); 
     //var ctx = this.canvasElement.nativeElement; 
     var myChart = new Chart(ctx, { 
      type: 'bar', 
      data: { 
       labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
       datasets: [{ 
        label: '# of Votes', 
        data: [12, 19, 3, 5, 2, 3] 
       }] 
      }, 
      options: { 
       scales: { 
        yAxes: [{ 
         ticks: { 
          beginAtZero: true 
         } 
        }] 
       } 
      } 
     }); 

    } 
} 

テンプレート：私はグローバルのHTMLキャンバス（ないテンプレート内）その後、すべての作品にタイムアウトと参照を設定

<h2>Statistic</h2> 
<canvas #canvas id="canvas"></canvas> 

。

私は1つのに類似のポストが見つかりました： chart does not display in angular2 component

をしかし、このdidntのは助けました。 私はloaderとしてsystemjsを使用しません。私はbrowserifyを使用します。 誰かが助けてくれることを願っています。

// UPDATE

//これは // APPEND NEW ELEMENT

class ChartComponent implements AfterViewInit { 
    @ViewChild('container') containerElement; 

    ngAfterViewInit() { 
     var canvas = document.createElement('canvas'); 
     this.containerElement.nativeElement.appendChild(canvas); 

     var myChart = new Chart(canvas, { 
      type: 'bar', 
      data: { 
       labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
       datasets: [{ 
        label: '# of Votes', 
        data: [12, 19, 3, 5, 2, 3] 
       }] 
      }, 
      options: { 
       scales: { 
        yAxes: [{ 
         ticks: { 
          beginAtZero: true 
         } 
        }] 
       } 
      } 
     }); 
    } 
} 

//これが動作しないWORKS - なぜ？ DIRECTLY

class ChartComponent implements AfterViewInit { 
    @ViewChild('canvas') canvas; 

    ngAfterViewInit() { 
     var myChart = new Chart(this.canvas.nativeElement, { 
      type: 'bar', 
      data: { 
       labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
       datasets: [{ 
        label: '# of Votes', 
        data: [12, 19, 3, 5, 2, 3] 
       }] 
      }, 
      options: { 
       scales: { 
        yAxes: [{ 
         ticks: { 
          beginAtZero: true 
         } 
        }] 
       } 
      } 
     }); 
    } 
} 

Answer 1

をVIEWCHILDを使用した //あなたはAngular2とChartJsに、既存の適応に探して検討しています。たとえば、ng2-charts is a great alternativeを使用すると、angle2アプリに組み込むのが簡単になります。

Answer 2

テンプレートを更新し、div内にキャンバス要素をラップしてみてください。その原因を知らないが、キャンバス要素がテンプレートhtmlのルートにあるときに問題が発生しているようだ。さて、私はNG2-チャートを試してみましたが、私はそこに同じ問題を抱えて

<h2>Statistic</h2> 
<div> 
    <canvas #canvas id="canvas"></canvas> 
</div>