Question

我目前正在与TypeScript一起探索Angular2，我想在我的应用程序中包含Chartjs模块。在chartjs documentation中显示了如何使用常见的canvas html标记：

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

如何使用Angular2和TypeScript做类似的事情？

提前致谢！

Answer 1

类似的东西：

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

Answer 2

您可以使用npm模块：

angular2-chartjs

然后您可以在模块中使用它：

import { ChartModule } from 'angular2-chartjs';

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

在html模板中：

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

不要忘记填写数据;）

在Angular2 App中使用Chartjs

2 个答案: