ionic4 使用charts绘制图表

 

最近在体测系统中，用到了图表的知识，接下来就简单分享一下图表的制作过程。

1.

首先要安装angular2图表和Charts.js

输入命令：

npm install ng2-charts --save
npm install chart.js --save

在该页面所在module中添加：如（achieve.module.ts）

import { ChartsModule } from 'ng2-charts';

在imports中声明模块：

imports: [
  BrowserModule,
  IonicModule.forRoot(MyApp),
  ChartsModule
],

这是ionic3和ionic4中不同的地方，ionic3中是在app.module.ts中添加引用，而ionic4是直接在该页面所在module中引用即可，不需要在app.module中引用了。如果只在app.module中引用，会形成以下错误：

Can't bind to 'datasets' since it isn't a known property of 'canvas'

2.

html代码：在<ion-content>中添加上这部分即可

  <div style="display: block">
    <canvas baseChart
                    [data]="dough