Gráficos com Xamarin.Forms

Neste post irei demonstrar como criar gráficos em sua aplicação Xamarin.Forms, para isso você irá utilizar o Nuget Package Microcharts.Forms.

ADICIONANDO O NUGET PACKAGE

Clique com o botão direito em cima de sua Solution e selecione “Manage NuGet Packages for Solution…”.

1

 

Digite “Microcharts.Forms” e selecione o plugin como demonstrado na imagem a seguir.

2

 

Selecione todos os projetos e clique no botão “Install”.

OBSERVAÇÃO: No momento em que escrevo este post, o Microcharts.Forms encontra-se em sua versão estável 0.7.0, essa versão é compatível com versões do Xamarin.Forms >= 3.0.0.  Porém a versão estável do Xamarin.Forms encontra-se na 2.3.4.270, dessa forma estou utilizando a versão 0.6.2 do Microcharts.Forms.

2

Dados de exemplo

Para este exemplo em meu Code-Behind criei alguns valores em uma lista de Microcharts.Entry como demonstrado a seguir.

Xaml

No arquivo xaml referencie o Microcharts.Forms e crie um ChartView.

Tipos de Gráficos

Agora basta adicionar a sua lista no “ChartView” criado anteriormente, definindo o tipo de gráfico desejado.

Barras

screenshot-15053379451692017-09-18_01-36-51-

 

 

 

 

 

 

 

 

 

 

 

 

Circular

screenshot-15053379742162017-09-18_01-37-19-

 

 

 

 

 

 

 

 

 

 

 

 

Linha

screenshot-15053379908902017-09-18_01-37-27-

 

 

 

 

 

 

 

 

 

 

 

 

Pontos

screenshot-15053379979192017-09-18_01-37-33-

 

 

 

 

 

 

 

 

 

 

 

 

 

Gauge

screenshot-15053380103012017-09-18_01-37-41-

 

 

 

 

 

 

 

 

 

 

 

 

 

Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.

icongithub

17 comentários em “Gráficos com Xamarin.Forms

    1. Olá Igo,

      Tem sim, utilize a propriedade LabelTextSize

      Exemplo em C#
      Grafico.Chart.LabelTextSize = 30;

      Exemplo em Xaml

      Curtir

  1. Ótimo post 🙂
    Tem como diminuir o tamanho do gráfico? Pois vou colocar os 12 meses e teve label que ficou embaixo do gráfico. Tentei mexer com o tamanho do “HeightRequest” e “WidthRequest” e não deu certo.

    Curtir

    1. Olá Alessandra,

      Obrigado 🙂

      Não sei qual dos tipos de gráfico que você está usando.
      Mas experimente colocar o gráfico dentro de um StackLayout que o HeightRequest e o WidthRequest irá funcionar.

      Outra dica também é rever o modelo do gráfico, quando possui muitas informações eu particularmente prefiro usar o de Barras ou o de Linha.

      Curtir

      1. Funcionou direitinho colocando dentro de um StackLayout.
        Obrigada pela dica do modelo do gráfico, pelo visto terei que mudar mesmo a forma que será visualizado as informações.

        Curtir

    1. Olá Humberto,

      Experimente criar um método na sua classe para retornar o Microcharts.Chart, depois é só fazer o Binding no Xaml.

      Espero ter ajudado.

      Curtir

  2. Olá, excelente tutorial. Tem como colocar os valores que aparecem em cima das barras(gráfico de barras) e das linhas(gráfico de linhas) na horizontal?

    Curtir

    1. Olá Daniel, obrigado.
      Experimente utilizar rotação para rotacionar o gráfico para a posição que você deseja.

      Espero ter ajudado.

      Curtir

  3. Eu consigo usar o entries e uma classe diferente do

    Grafico.Chart = new Microcharts.LineChart() { Entries = entries };

    estou usando o mvvm e quero pegar os dados no graficoViewModel e e criar o gráfico na graficoView

    Curtir

    1. Olá Anderson,

      Não sei se eu entendi a sua pergunta direito, caso ela seja se tem como substituir a classe Entry pela sua classe, eu te digo que não. O pois o Microcharts precisa da classe Entry e suas propriedades.

      Eu recomendo você criar um método na sua classe para realizar a conversão e te retornar o Microcharts.Chart, assim você faz o Binding no Xaml.

      Espero ter ajudado.

      Curtir

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s