ionic4+angular 增加图表显示报表数据

客官°小女子只卖身不卖艺 2023-07-17 09:43 23阅读 0赞

# Creating Beautiful Charts Easily using Ionic 3 and Angular 4 #

ionic start ionic-charts tabs

## **Install Angular 2 Charts and Charts.js** ##

To install Angular 2 charts (ng2-charts) and Charts.js, simply type this command.

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

Open and edit 'src/app/app.module.ts' then add this import of ChartsModule.

import { ChartsModule } from 'ng2-charts';

Then declare the charts module in imports array.

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

## **Show Line Charts** ##

To show line charts add the default Ionic HTML tags that taken from Angular 2 charts example. We will display the line chart in the canvas with some attributes that available from Angular 2 Charts. Open and edit 'src/pages/home/home.html' then add these lines inside 'ion-content'.

<ion-content padding>
      <div class="row">
        <div class="col-md-6">
          <div style="display: block;">
          <canvas baseChart width="300" height="400"
                      [datasets]="lineChartData"
                      [labels]="lineChartLabels"
                      [options]="lineChartOptions"
                      [colors]="lineChartColors"
                      [legend]="lineChartLegend"
                      [chartType]="lineChartType"
                      (chartHover)="chartHovered($event)"
                      (chartClick)="chartClicked($event)"></canvas>
          </div>
        </div>
      </div>
    </ion-content>

Now, open and edit 'src/pages/home/home.ts' then add these variables that required to build line charts before the constructor.

public lineChartData:Array<any> = [
      {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
      {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
      {data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'}
    ];
    public lineChartLabels:Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
    public lineChartOptions:any = {
      responsive: true
    };
    public lineChartColors:Array<any> = [
      { // grey
        backgroundColor: 'rgba(148,159,177,0.2)',
        borderColor: 'rgba(148,159,177,1)',
        pointBackgroundColor: 'rgba(148,159,177,1)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgba(148,159,177,0.8)'
      },
      { // dark grey
        backgroundColor: 'rgba(77,83,96,0.2)',
        borderColor: 'rgba(77,83,96,1)',
        pointBackgroundColor: 'rgba(77,83,96,1)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgba(77,83,96,1)'
      },
      { // grey
        backgroundColor: 'rgba(148,159,177,0.2)',
        borderColor: 'rgba(148,159,177,1)',
        pointBackgroundColor: 'rgba(148,159,177,1)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgba(148,159,177,0.8)'
      }
    ];
    public lineChartLegend:boolean = true;
    public lineChartType:string = 'line';
    
    public randomize():void {
      let _lineChartData:Array<any> = new Array(this.lineChartData.length);
      for (let i = 0; i < this.lineChartData.length; i++) {
        _lineChartData[i] = {data: new Array(this.lineChartData[i].data.length), label: this.lineChartData[i].label};
        for (let j = 0; j < this.lineChartData[i].data.length; j++) {
          _lineChartData[i].data[j] = Math.floor((Math.random() * 100) + 1);
        }
      }
      this.lineChartData = _lineChartData;
    }
    
    // events
    public chartClicked(e:any):void {
      console.log(e);
    }
    
    public chartHovered(e:any):void {
      console.log(e);
    }

As you see there's an array of data that build line charts, lineChartLabel, lineChartOption, lineChartLegend, lineChartColors, lineChartType, and the function that handle chart events. Now, run again the app. You should see the line charts inside the home tab.

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbXJ0aWFu_size_16_color_FFFFFF_t_70][]

## **Create Bar Charts** ##

To create bar charts, we just use existing about tab. The Bar Charts will display in canvas that has the attribute of Angular Charts. Open and edit 'src/pages/about/about.html' then replace the content of 'ion-content' with these codes.

<ion-content padding>
      <div>
        <div style="display: block">
          <canvas baseChart
                  [datasets]="barChartData"
                  [labels]="barChartLabels"
                  [options]="barChartOptions"
                  [legend]="barChartLegend"
                  [chartType]="barChartType"
                  (chartHover)="chartHovered($event)"
                  (chartClick)="chartClicked($event)"></canvas>
        </div>
        <button (click)="randomize()">Update</button>
      </div>
    </ion-content>

Next, open and edit 'src/pages/about/about.ts' then add these variables before the constructor.

public barChartOptions:any = {
      scaleShowVerticalLines: false,
      responsive: true
    };
    public barChartLabels:string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
    public barChartType:string = 'bar';
    public barChartLegend:boolean = true;
    
    public barChartData:any[] = [
      {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
      {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}
    ];
    
    // events
    public chartClicked(e:any):void {
      console.log(e);
    }
    
    public chartHovered(e:any):void {
      console.log(e);
    }
    
    public randomize():void {
      // Only Change 3 values
      let data = [
        Math.round(Math.random() * 100),
        59,
        80,
        (Math.random() * 100),
        56,
        (Math.random() * 100),
        40];
      let clone = JSON.parse(JSON.stringify(this.barChartData));
      clone[0].data = data;
      this.barChartData = clone;
      /**
       * (My guess), for Angular to recognize the change in the dataset
       * it has to change the dataset variable directly,
       * so one way around it, is to clone the data, change it and then
       * assign it;
       */
    }

Take a look again at the running app on the browser. On the about tab will look like this.

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbXJ0aWFu_size_16_color_FFFFFF_t_70 1][]

## **Create a Doughnut Chart** ##

To create doughnut charts, we just use existing about tab. Open and edit 'src/pages/contact/contact.html' then replace the content of 'ion-content' with these codes.

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

Next, open and edit 'src/pages/contact/contact.ts' then add these variables before the constructor.

// Doughnut
    public doughnutChartLabels:string[] = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
    public doughnutChartData:number[] = [350, 450, 100];
    public doughnutChartType:string = 'doughnut';
    
    // events
    public chartClicked(e:any):void {
      console.log(e);
    }
    
    public chartHovered(e:any):void {
      console.log(e);
    }

Take a look again at the running app on the browser. On the contact, the tab will look like this.

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbXJ0aWFu_size_16_color_FFFFFF_t_70 2][]

That's the sample of using charts in Ionic 3 and Angular 4 mobile app. You can find the sample codes on the [GitHub][].

We know that building beautifully designed Ionic apps from scratch can be frustrating and very time-consuming. Check [Ionic 4 - Full Starter App][] and save development and design time. Android, iOS, and PWA, 100+ Screens and Components, the most complete and advance Ionic Template.

That just the basic. If you need more deep learning about Ionic, Angular, and Typescript, you can take the following cheap course:

*  [IONIC 4 Design Hybrid Mobile Applications IOS & Android][IONIC 4 Design Hybrid Mobile Applications IOS _ Android]![format_png][]
 *  [Wordpress Rest API and Ionic 4 (Angular) App With Auth][Wordpress Rest API and Ionic 4 _Angular_ App With Auth]![format_png][]
 *  [Mobile App from Development to Deployment - IONIC 4][]![format_png][]
 *  [Ionic 4 Crash Course with Heartstone API & Angular][Ionic 4 Crash Course with Heartstone API _ Angular]![format_png][]
 *  [Ionic 4 Mega Course: Build 10 Real World Apps][Ionic 4 Mega Course_ Build 10 Real World Apps]![format_png][]

Thanks.

转载地址:   [https://www.djamware.com/post/598953f880aca768e4d2b12b/creating-beautiful-charts-easily-using-ionic-3-and-angular-4\#create-ionic-angular][https_www.djamware.com_post_598953f880aca768e4d2b12b_creating-beautiful-charts-easily-using-ionic-3-and-angular-4_create-ionic-angular]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbXJ0aWFu_size_16_color_FFFFFF_t_70]: /images/20230528/ea5d38bab25943ada05aa43504e64d2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbXJ0aWFu_size_16_color_FFFFFF_t_70 1]: /images/20230528/dcee486ccab549889bb9d3b6b70caea7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbXJ0aWFu_size_16_color_FFFFFF_t_70 2]: /images/20230528/71bf2f1c17fe4c329ff1377258faea4a.png
[GitHub]: https://github.com/didinj/ionic3-angular4-charts-example.git
[Ionic 4 - Full Starter App]: https://ionicthemes.com/product/ionic4-full-starter-app?ref=djamware
[IONIC 4 Design Hybrid Mobile Applications IOS _ Android]: https://click.linksynergy.com/link?id=6nYo96*QrJE&offerid=507388.2259072&type=2&murl=https%3A%2F%2Fwww.udemy.com%2Fhybrid-mobile-applications-with-ionic4%2F
[format_png]: /images/20230528/ac6936db55ae4c4cab3ca48b15ee73a1.png
[Wordpress Rest API and Ionic 4 _Angular_ App With Auth]: https://click.linksynergy.com/link?id=6nYo96*QrJE&offerid=507388.1515202&type=2&murl=https%3A%2F%2Fwww.udemy.com%2Fwordpress-rest-api-and-ionic-3-crud%2F
[Mobile App from Development to Deployment - IONIC 4]: https://click.linksynergy.com/link?id=6nYo96*QrJE&offerid=507388.2276149&type=2&murl=https%3A%2F%2Fwww.udemy.com%2Fmobile-app-from-development-to-deployment-ionic-4%2F
[Ionic 4 Crash Course with Heartstone API _ Angular]: https://click.linksynergy.com/link?id=6nYo96*QrJE&offerid=507388.1861088&type=2&murl=https%3A%2F%2Fwww.udemy.com%2Fionic-4-crash-course-with-heartstone-api-angular%2F
[Ionic 4 Mega Course_ Build 10 Real World Apps]: https://click.linksynergy.com/link?id=6nYo96*QrJE&offerid=507388.2361638&type=2&murl=https%3A%2F%2Fwww.udemy.com%2Fionic-4-mega-course-build-real-world-apps%2F
[https_www.djamware.com_post_598953f880aca768e4d2b12b_creating-beautiful-charts-easily-using-ionic-3-and-angular-4_create-ionic-angular]: https://www.djamware.com/post/598953f880aca768e4d2b12b/creating-beautiful-charts-easily-using-ionic-3-and-angular-4#create-ionic-angular