ionic4 使用charts绘制图表

2019/1/13 21:22:57 人评论 次浏览 分类:学习教程

 

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

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

 

相关资讯

    暂无相关的资讯...

共有访客发表了评论 网友评论

验证码: 看不清楚?
    -->