Chart.js是一个流行的JavaScript图表库，ng2图表是Angular 2+的包装器，可以轻松地将Chart.js集成到Angular中。 我们来看看基本用法。
安装
首先，在项目中安装 Chart.js 和 ng2-charts:
or npm
$ npm install ng2-charts charts.js --save
当然 ，如果你是使用Angular CLI构建的项目，你也可以很容易的添加Chart.js 添加.angular-cli.json配置文件中，以便将它与应用绑定在一直：
现在，你需要在你的 app 模块或功能模块导入 ng2-charts 的ChartsModule:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ChartsModule } from '@angular/charts';
import { NgModule } from '@angular/core';
import { ChartsModule } from '@angular/charts';
import { AppComponent } from './app.component';
@NgModule({
declarations: [ AppComponent ],imports: [
BrowserModule,ChartsModule
],providers: [],bootstrap: [ AppComponent ]
})
export class AppModule {}
使用
ng2-charts 给我们提供了一个可以应用于HTML canvas元素的baseChart指令。 以下是一个示例，其中显示了一些用于输入的选项以及该指令输出的chartClick事件：
<div style="width: 40%;">
<canvas
baseChart
[chartType]="'line'"
[datasets]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[legend]="true"
(chartClick)="onChartClick($event)">
<canvas
baseChart
[chartType]="'line'"
[datasets]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[legend]="true"
(chartClick)="onChartClick($event)">
