在angular 2中使用ng-chart的问题

在Angular 2中使用ng-chart的问题是关于在Angular 2项目中如何使用ng-chart库来实现图表功能的问题。

ng-chart是一个基于Chart.js的Angular图表库，它提供了一系列的组件和指令，方便开发者在Angular项目中快速集成和使用图表功能。

要在Angular 2中使用ng-chart，首先需要安装ng-chart库。可以通过npm包管理工具来安装ng-chart，具体命令如下：

npm install ng2-charts chart.js --save

安装完成后，需要在Angular项目中引入ng-chart模块。在app.module.ts文件中添加以下代码：

import { ChartsModule } from 'ng2-charts';

@NgModule({
  imports: [
    // 其他模块
    ChartsModule
  ],
  // 其他配置
})
export class AppModule { }

接下来就可以在组件中使用ng-chart来创建图表了。首先，在组件的HTML模板中添加一个canvas元素，用于显示图表：

<canvas baseChart
        [datasets]="barChartData"
        [labels]="barChartLabels"
        [options]="barChartOptions"
        [legend]="barChartLegend"
        [chartType]="barChartType"></canvas>

然后，在组件的TypeScript代码中定义图表的数据和配置：

import { Component } from '@angular/core';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent {
  public barChartOptions = {
    scaleShowVerticalLines: false,
    responsive: true
  };
  public barChartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
  public barChartType = 'bar';
  public barChartLegend = true;
  public barChartData = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
    { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }
  ];
}

以上代码定义了一个柱状图，包括图表的标签、类型、数据和配置。你可以根据需要修改这些数据和配置。

最后，在需要显示图表的组件中引入ChartComponent，并在模板中添加图表组件的标签：