ionic4 usa gráficos para dibujar gráficos

 

Recientemente, en el sistema de pruebas físicas, utilicé el conocimiento de los gráficos y luego compartiré brevemente el proceso de creación de gráficos.

1.

Primero instale gráficos angulares2 y Charts.js

ingrese el comando:

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

Agregue en el módulo donde está la página: como (lograr.module.ts)

import { ChartsModule } from 'ng2-charts';

Declare el módulo en importaciones:

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

Esta es la diferencia entre ionic3 e ionic4. En ionic3, se agrega una referencia a app.module.ts, mientras que ionic4 se puede hacer referencia directamente en el módulo donde se encuentra la página, y no es necesario hacer referencia a él en app.module. Si solo se hace referencia en el módulo de la aplicación, se formará el siguiente error:

No se puede enlazar a 'conjuntos de datos' porque no es una propiedad conocida de 'lienzo'

2.

código html: simplemente agregue esta parte en <ion-content>

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

código 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.

Imagen de efecto:

Resumen: Canvas es un lienzo, que se puede usar para dibujar gráficos como gráficos de líneas, donas, gráficos de barras, etc. Los siguientes son métodos de dibujo más completos de varios gráficos, pero he mejorado la configuración anterior, consulte este artículo más: https://www.djamware.com/post/598953f880aca768e4d2b12b/creating-beautiful-charts-easily-using-ionic-3-and-angular-4