在Angular2中使用Chartjs App

Question

我目前正在探索Angular2與TypeScript結合使用，我想在我的應用程序中包含Chartjs模塊。在chartjs documentation顯示如何使用常見的帆布HTML標記來做到這一點：

<canvas id="myChart" width="400" height="400"></canvas> 
<script> 
var ctx = document.getElementById("myChart"); 
var myChart = new Chart(ctx, {[...]}); 
</script> 

如何我可以做類似的事情Angular2和打字稿？

在此先感謝！

Answer 1

您可以使用NPM模塊：

angular2-chartjs

然後你就可以在你的模塊中使用這樣的：

import { ChartModule } from 'angular2-chartjs'; 

@NgModule({ 
    imports: [ ChartModule ] 
    // ... 
}) 
export class AppModule { 
} 

，而在HTML模板：

<chart [type]="type" [data]="data" [options]="options"></chart> 

不要忘記填寫數據;）

Answer 2

喜歡的東西：

@Component({ 
    selector: 'my-component', 
    template: ` 
<canvas #myChart" width="400" height="400"></canvas> 
<script> 
`)} 
export class MyComponent { 
    @ViewChild('myChart') myChart; 

    ngAfterViewInit() { 
    var myChart = new Chart(this.target.nativeElement, {[...]}); 
    } 
}