ionic4 使用charts绘制图表

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

首先要安装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'

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

  <div style="display: block">
    <canvas baseChart
                    [data]="doughnutChartData"
                    [labels]="doughnutChartLabels"
                    [chartType]="doughnutChartType"
                    (chartHover)="chartHovered($event)"
                    (chartClick)="chartClicked($event)">
    </canvas>

page.ts代码

扫描二维码关注公众号，回复： 12034605 查看本文章

export class AchieveMainPage implements OnInit {
public doughnutChartLabels: string[] = ['及格', '不及格'];
public doughnutChartData: number[] = [350, 450];
public doughnutChartType = 'doughnut';


// events
public chartClicked(e: any): void {
  console.log(e);
}

public chartHovered(e: any): void {
  console.log(e);
}
}

效果图：

总结：canvas是一个画布，可以完成折线图，甜甜圈，柱状图等图表的绘制，下面是比较全面的几种图表的画法，但是前期的配置，我进行了改进，请多多参考本文：https://www.djamware.com/post/598953f880aca768e4d2b12b/creating-beautiful-charts-easily-using-ionic-3-and-angular-4

ionic4 使用charts绘制图表

猜你喜欢