[IONIC] – Gráficos com Angular2 Charts
Olá galera, tranquilo?
Fiquei um pouco sumido com tutoriais pois, estou um pouco atarefado e agora estou também gravando uma série de vídeos no Youtube, caso queiram, podem conferir AQUI o canal. Ensino do básico até a publicar um app Ionic nas lojas Android e Apple, ok? É novo ainda, e tem apenas 5 vídeos publicados, mas semanalmente lanço 2 vídeos, vale a pena ficar de olho, pois vai ter muita coisa bacana com Ionic.
Bom, a dica de hoje é realmente muito BACANA. Muitas aplicações exigem demonstração de números em gráficos, então vou ensinar o uso com Angular2 Charts, além de deixar o app estiloso, fica bem bonito e interativo para o usuário, vamos la?
1. Criar o projeto Ionic
Vamos começar gerando um novo aplicativo Ionic em branco, para fazer isso, apenas execute o seguinte comando:
1 |
ionic start charts blank |
Uma vez criado, vamos entrar no diretório do Projeto, executando:
1 |
cd charts |
2. Instalando Ng2-Charts
Para utilizar essa incrível biblioteca, devemos instalar as dependências do Ng2-Charts, para isso vamos executar:
1 |
npm install ng2-charts --save |
Agora, devemos também instalar as bibliotecas do chart.js:
1 |
npm install chart.js --save |
OBS: É importante alterar o arquivo src/index.html e adicionar:
1 |
<script src="node_modules/chart.js/src/chart.js"></script> |
3. Importar a biblioteca
Tudo instalado, agora vamos importar a biblioteca para o nosso projeto e usar na aplicação inteira, então iremos alterar o arquivo
Para isso, vamos alterar o arquivo src/app/app.module.ts
1 2 3 4 5 |
import { ChartsModule } from 'ng2-charts'; imports: [ ChartsModule ] |
4. Gerando os dados
Pronto, agora já podemos utilizar o ng-Charts, então vamos gerar alguns dados fictícios, a fim de mostrar como funciona e vermos em tela o resultado, o arquivo src/pages/home/home.ts deverá ser alterado:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { barChartOptions: any = [{ scales: { yAxes: [ { display: true, ticks: { fontSize: 10, colors: '#fff' } } ] } }]; barChartLabels = []; barChartType:string = 'bar'; barChartLegend:boolean = true; barChartData:any; barChartColors:Array<any> = [ { backgroundColor: '#3F51B5', borderColor: '#3F51B5', pointBackgroundColor: '#3F51B5', pointBorderColor: '#3F51B5', pointHoverBackgroundColor: '#3F51B5', pointHoverBorderColor: '#3F51B5', labels: '#3F51B5' }] doughnutChartLabels:string[]; doughnutChartData:number[]; doughnutChartType:string = 'doughnut'; constructor(public navCtrl: NavController) { } calc(tipo){ if (tipo === 'bar') { this.calcBar(); } else { this.calcDoughnut(); } } calcBar(){ this.barChartLabels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; this.barChartData = [ {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'}, {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'} ]; } calcDoughnut(){ this.doughnutChartLabels = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales']; this.doughnutChartData = [350, 450, 100]; }; } |
Aqui nós criamos algumas variáveis pré-definidas.
Um método calc(tipo), onde o tipo é o valor do segment que iremos criar para mostrar o chart do tipo Bar ou do tipo Doughnut.
E criamos 1 método para gerar cada chart (calcBar ou calcDoughnut).
Como os nossos dados são estáticos, apenas de exemplo, ficou bem simples de se fazer.
Quando implementado buscando dados externos, seja de um ws, de uma api, de um banco de dados, poderá ficar um pouco mais complexo, mas a partir deste exemplo, creio que dê para ter noção de como utilizar.
5. Mostrando os gráficos
Agora que já temos os dados, vamos mostrar os gráficos na tela, para isso, devemos alterar o arquivo src/pages/home/home.html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<ion-header> <ion-navbar> <ion-title> Charts </ion-title> </ion-navbar> </ion-header> <ion-content> <div padding> <ion-segment [(ngModel)]="segment" (ionChange)="calc(segment)"> <ion-segment-button value="bar"> Bar </ion-segment-button> <ion-segment-button value="doughnut"> Doughnut </ion-segment-button> </ion-segment> </div> <div [ngSwitch]="segment" style="segment"> <ion-list *ngSwitchCase="'bar'" > <div style="display: block"> <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [colors]="barChartColors" [chartType]="barChartType"></canvas> </div> </ion-list> <ion-list *ngSwitchCase="'doughnut'"> <div width="600" height="800"> <div style="display: block" > <canvas baseChart [data]="doughnutChartData" [labels]="doughnutChartLabels" [chartType]="doughnutChartType"></canvas> </div> </div> </ion-list> </div> </ion-content> |
Primeiro nós criamos um segment com 2 valores (Bar e Doughnut). E determinamos o método (ionChange)=”calc(segment)” para calcular o gráfico sempre que alterarmos o segment de acordo com o tipo passado.
Dentro de cada segment, obviamente iremos mostrar os gráficos de acordo com a opção escolhida.
6. Executando o projeto
Pronto!!
Vamos ver o resultado, então digite o comando
1 |
ionic serve -l |
ou
1 |
ionic cordova run android |
ou
1 |
ionic cordova run ios |
e deveremos ter algo semelhante à isso:
Espero que tenham gostado e que possam utilizar daqui pra frente nos projetos de vocês essa dica bem bacana.
Caso tenham gostado, compartilhe com os amigos, e se houver dúvidas podem comentar, que o mais breve possível eu respondo!!
O Código fonte para tudo isso que fizemos, encontra-se aqui.
Valeu, até mais!
About author
You might also like
Xamarin Forms – Data Binding entre controles
Share this on WhatsAppAprenda fazer Data Binding entre seus componentes de sua View no Xamarin Forms Fala galera, beleza? Como alguns de vocês já sabem, depois de passar um tempo
Curso grátis – Dominando Postman em 10 passos
Share this on WhatsAppPostman é uma ótima ferramenta para testar, monitorar e gerar documentações para APIs. Se você é novo com o Postman, este curso irá ajudá-lo a dominar esta
Como FAZER meu APLICATIVO em Ionic FALAR?
Share this on WhatsAppNo artigo de hoje irei ensinar um recurso bastante interessante que vejo poucas pessoas utilizando hoje em dia, nós iremos aprender fazer nosso aplicativo falar com o
3 Comments
Renata
fevereiro 18, 16:29taiguaraguirado
março 15, 09:14Felipe - SENAC
junho 11, 21:13