- 确保你已经安装了Chart.js和ng2-charts的npm包,可使用以下命令安装:
npm install chart.js --save
npm install ng2-charts --save
- 在app.module.ts中导入ChartsModule:
import { ChartsModule } from 'ng2-charts';
...
@NgModule({
imports: [
...
ChartsModule
],
...
})
export class AppModule { }
- 确保你在将ng2-charts组件添加到HTML模板之前引入了Chart.js文件,可在index.html中添加以下代码:
- 组件使用示例:
import { Component } from '@angular/core';
@Component({
selector: 'app-chart',
template: `
`
})
export class ChartComponent {
public doughnutChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
public doughnutChartData: number[] = [350, 450, 100];
public doughnutChartType: string = 'doughnut';
}
- 最后,尝试重新启动你的应用程序并检查控制台是否有任何错误消息。