[IONIC] – Gráficos com Angular2 Charts

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

Uma vez criado, vamos entrar no diretório do Projeto, executando:

2. Instalando Ng2-Charts

Para utilizar essa incrível biblioteca, devemos instalar as dependências do Ng2-Charts, para isso vamos executar:

Agora, devemos também instalar as bibliotecas do chart.js:

OBS: É importante alterar o arquivo src/index.html e adicionar:

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

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:

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:

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

ou

ou

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!

Previous Curso Grátis Ionic - #4 - NavController, navegando entre telas
Next Microsoft lança kit para programação quântica!

About author

Junior Abranches
Junior Abranches 19 posts

Um apaixonado por tecnologia e desenvolvimento web e mobile. Compartilhar e aprender sempre!

You might also like

Sem categoria 0 Comments

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

Sem categoria 1Comments

Paralelismo com C#

Share this on WhatsAppAprendar trabalhar com processamento paralelo em C#. E ai pessoal beleza, atualmente ando meio afastado do blog, mas sempre que pintar um tempinho eu prometo trazer novos

Mobile 0 Comments

Live 03 – Como GERAR PDF em IONIC 5

Share this on WhatsAppFala Dev!Estarei realizando uma live no dia 30/04 as 21:10h onde ensinarei Como GERAR PDF em IONIC 5.Ha ideia dessa live surgiu a partir das dúvidas de

3 Comments

  1. Renata
    fevereiro 18, 16:29 Reply
    Muito bom esse post. Obrigada. :)
  2. Felipe - SENAC
    junho 11, 21:13 Reply
    kkk olha eu procurando um tutorial de graficos com ionic e encontro um post do professor haha.. TOP! Vlw! Abraço!

Leave a Reply