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