Angular 2を使用しているときにChart.jsチャートがレンダリングされない

Question

typescriptで書かれたAngular2アプリケーションでChart.js 2.0を使用しようとしています。まず、ドキュメントに表示されている基本的なグラフ（http://www.chartjs.org/docs/#getting-started-creating-a-chartを参照）を取得しようとしていますが、多くの運がありませんでした。私のチャートオブジェクトは作成されますが、ブラウザではレンダリングされません。

私のコンポーネントは次のようになります。

import {Component, Input, AfterViewInit, NgZone} from 'angular2/core'; 


declare var Chart; 

@Component({ 
    selector: 'chart', 
    templateUrl: '/app/components/chart.template.html' 
}) 


export class ChartComponent implements AfterViewInit { 

    constructor(private zone: NgZone) { } 

    ngAfterViewInit() { 
     console.log('In the after function') 
     this.zone.runOutsideAngular(() => { 
      var ctx = document.getElementById("myChart"); 
      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 
          } 
         }] 
        } 
       } 
      }); 
      console.log(myChart); 
     }); 

    } 
} 

マイテンプレートは、キャンバスを設定するだけで一行は非常に簡単です：

<canvas id="myChart" width="400" height="400"></canvas> 

私はチャートオブジェクトがあるというのが私のログのステートメントから見ることができます正しいデータがあれば、ブラウザでレンダリングされることは決してありません。私はFirebugのソースを見てみると、私は次を参照してください。

<chart> 
    <iframe style="width: 100%; display: block; border: 0px none; height: 0px; margin: 0px; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;" class="chartjs-hidden-iframe"></iframe> 
    <canvas style="width: 0px; height: 0px;" width="0" id="myChart" height="0"></canvas> 
</chart> 

私はmyChart.render()とmyChart.draw()を追加しようとしましたが、任意の違いを見ていないように見えます。

誰かが間違っているのを見ることはできますか？

私はここにゾーンを使用するのではなく、そのようなことではないでしょう

Answer 1

：

export class ChartComponent implements AfterViewInit { 
    @ViewChild('myChart') 
    myChart:ElementRef; 

    ngAfterViewInit() { 
    var myChart = new Chart(this.myChart.nativeElement, { 
    (...) 
    } 
} 

、テンプレートで：

<canvas #myChart width="400" height="400"></canvas> 

この質問はまた、あなたを助けることができる：

• Chart is not working in Angular2