ionic4 uses charts to draw charts

 

Recently, in the physical test system, I used the knowledge of charts, and then I will briefly share the process of making charts.

1.

First install angular2 charts and Charts.js

input the command:

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

Add in the module where the page is: such as (achieve.module.ts)

import { ChartsModule } from 'ng2-charts';

Declare the module in imports:

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

This is the difference between ionic3 and ionic4. In ionic3, a reference is added to app.module.ts, while ionic4 can be directly referenced in the module where the page is located, and there is no need to reference it in app.module. If only referenced in app.module, the following error will be formed:

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

2.

html code: just add this part in <ion-content>

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

page.ts code

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.

Effect picture:

Summary: Canvas is a canvas, which can be used to draw graphs such as line graphs, donuts, bar graphs, etc. The following are more comprehensive drawing methods of several graphs, but I have improved the previous configuration, please refer to this article more: https://www.djamware.com/post/598953f880aca768e4d2b12b/creating-beautiful-charts-easily-using-ionic-3-and-angular-4