在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, {[...]}); 
    } 
}