在Angular2应用程序中使用Chartjs

我目前正在和TypeScript一起探索Angular2,我想在我的应用程序中包含Chartjs模块。 在chartjs文档中显示了如何使用通用的canvas HTML标签来完成它:

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

我怎样才能用Angular2和TypeScript做类似的事情?

提前致谢!

你可以使用npm模块:

angular2-chartjs

那么你可以在你的模块中像这样使用它:

 import { ChartModule } from 'angular2-chartjs'; @NgModule({ imports: [ ChartModule ] // ... }) export class AppModule { } 

而在html模板中:

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

不要忘记填写数据;)

就像是:

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