最近在体测系统中,用到了图表的知识,接下来就简单分享一下图表的制作过程。
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]="doughnutChartData"
[labels]="doughnutChartLabels"
[chartType]="doughnutChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
</canvas>
page.ts代码
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);
}
}
3.
效果图:
总结:canvas是一个画布,可以完成折线图,甜甜圈,柱状图等图表的绘制,下面是比较全面的几种图表的画法,但是前期的配置,我进行了改进,请多多参考本文:https://www.djamware.com/post/598953f880aca768e4d2b12b/creating-beautiful-charts-easily-using-ionic-3-and-angular-4