酷徒LOGO

轻松使用Ionic 3和Angular 4创建美丽的图表


有时我们需要创建图表以在Ionic 3移动应用程序中显示任何进度或报告。 现在,我们必须向您展示一个简单的分步教程,使用Ionic 3和Angular 4轻松创建漂亮的图表(线条,圆环和条形图)。本教程使用现有的Angular 2指令模块,可以很好地使用Angular 4 该指令使得Charts.js的使用更加简单,易于与Angular 4应用程序集成,在本例中适用于Ionic 3移动应用程序。

在本教程中,我们只需要很少的工具和模块:

- Node.js
- Ionic 3 and Angular 4
- Angular 2 Charts
- Charts.js

我们开始学习本教程。

1. Create Ionic 3 and Angular 4 Apps

我们正在使用标签模板创建Ionic 3和Angular 4移动应用。 打开终端或节点命令行,然后键入此命令。

ionic start ionic-charts tabs

After waiting for NPM modules installed, go to the newly created app folder.

cd ionic-charts

To check the version of Ionic CLI and required tools type this command.

ionic info

You will see the latest Ionic CLI versions similar with this (I'm using OS X).

cli packages: (/Users/didin/Documents/Apps/ionic-charts/node_modules)

    @ionic/cli-plugin-ionic-angular : 1.4.1
    @ionic/cli-utils                : 1.7.0
    ionic (Ionic CLI)               : 3.7.0

local packages:

    @ionic/app-scripts : 2.1.3
    Ionic Framework    : ionic-angular 3.6.0

System:

    Android SDK Tools : 26.0.2
    Node              : v6.9.4
    OS                : OS X El Capitan
    Xcode             : Xcode 8.0 Build version 8A218a
    ios-deploy        : 1.9.0
    ios-sim           : 5.0.12
    npm               : 3.10.10

As usual, to make sure Ionic 3 app working, run this app first.

ionic serve --lab

 

2. Install Angular 2 Charts and Charts.js

 

要安装Angular 2图表和Charts.js,只需输入此命令即可。

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

Open and edit 'src/app/app.module.ts' the add this import.

import { ChartsModule } from 'ng2-charts';

Then declare the charts module in imports array.

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

这是唯一需要安装的东西。

3.显示折线图

要显示折线图,请添加从Angular 2图表示例中获取的默认HTML标记。 打开并编辑'src / pages / home / home.html'然后在'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>

现在,打开并编辑'src / pages / home / home.ts'然后添加在构造函数之前构建折线图所需的变量。


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);
}

现在,再次运行应用程序。 您应该在主页选项卡中看到折线图。

4. Create Bar Charts

To create bar charts, we just use existing about tab. Open and edit 'src/pages/about/about.html' then replace content of 'ion-content' with this 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 this 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;
   */
}

 

再看看浏览器上正在运行的应用程序。 在about选项卡上将如下所示。

5. Create Doughnut Chart

要创建圆环图,我们只使用现有的about选项卡。 打开并编辑'src / pages / contact / contact.html',然后用此代码替换'ion-content'的内容。


<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>

接下来,打开并编辑'src / pages / contact / contact.ts',然后在构造函数之前添加此变量。

 

// 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);
}

再看看浏览器上正在运行的应用程序。 在联系人上,选项卡将如下所示。

这是在Ionic 3和Angular 4移动应用程序中使用图表的示例。 您可以在GitHub上找到示例代码。

我们知道从头开始构建设计精美的Ionic应用程序可能令人沮丧且非常耗时。 检查Ion2FullApp ELITE  - 完整的Ionic 3入门应用程序,节省开发和设计时间。

那只是基本的。 如果您需要更深入地了解Ionic,Angular和Typescript,您可以找到以下书籍:

Or take the following course:




Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备17041772号-2  |  如果智培  |  酷兔英语  |  帮酷