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]="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

 

相关资讯

  • 那些我们不愿意承认的事

    很久没有见的老朋友,准确的说应该是很久没有见过的老师,一个比我大两岁的老师,我上初中的时候他从高中回来教我了一年。后来又回去上高中,我上高中的时候他上大学,现在我刚大学毕业他创办了公司。昨日一见依然如故,他还是热爱销售,而我却成了纯粹的技术人员。 看到他…

    2015/6/22 13:12:47

学习教程

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

验证码: 看不清楚?

    手机微信扫一扫,添加微信好友