Fala, galera! Beleza?

Alguns aplicativos, principalmente os que trabalham com dados financeiros, vendas e etc, muitas vezes têm a necessidade de exibir gráficos.

Existe uma forma muito simples de exibir diversos gráficos em Xamarin.Forms, com o incrível controle Microcharts!

Neste artigo, veremos como utilizar esse controle e todas as possibilidades de gráficos que ele nos oferece.

Vamos lá!

Configurando o controle

Vamos ao nuget baixar os pacotes Microcharts e Microcharts.Forms. Sim, vamos instalar a versão 0.8.5-pre, pois ele corrige diversos bugs da versão atual – inclusive é a que estou usando em produção:

Instale em todos os projetos, e pronto.

Utilizando Microcharts

Existem diversos tipos de gráficos no Microcharts:

Para dar um exemplo de implementação vamos criar um ranking global de consoles vendidos – última atualização em abril de 2019.

Para utilizar o Microcharts na tela vamos utilizar o namespace xmlns:microcharts=”clr-namespace:Microcharts.Forms;assembly=Microcharts.Forms” e criar seis tipos de gráficos para demonstrar as variações:

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
               xmlns:microcharts="clr-namespace:Microcharts.Forms;assembly=Microcharts.Forms" 
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                mc:Ignorable="d"
             Padding="0,40,0,0"
             xmlns:local="clr-namespace:GraficosExemplo" x:Class="GraficosExemplo.MainPage">
    
      <ScrollView>
        <StackLayout Spacing="10" BackgroundColor="#EEEEEE">
            <Label Margin="20,20,20,20" Text="Vendas de Consoles Global  - Atualizado Abril 2019" FontAttributes="Bold" FontSize="Medium"></Label>
            <microcharts:ChartView x:Name="chart1" HeightRequest="300" BackgroundColor="White" />
            <microcharts:ChartView x:Name="chart2" HeightRequest="300" BackgroundColor="White" />
            <microcharts:ChartView x:Name="chart3" HeightRequest="300" BackgroundColor="White" />
            <microcharts:ChartView x:Name="chart4" HeightRequest="300" BackgroundColor="White" />
            <microcharts:ChartView x:Name="chart5" HeightRequest="300" BackgroundColor="White" />
            <microcharts:ChartView x:Name="chart6" HeightRequest="300" BackgroundColor="White" />
        </StackLayout>
    </ScrollView>

    
</ContentPage>

Agora vamos implementar a lógica para criar os gráficos:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Microcharts;
using SkiaSharp;

namespace GraficosExemplo
{
    // Learn more about making custom code visible in the Xamarin.Forms previewer
    // by visiting https://aka.ms/xamarinforms-previewer
    [DesignTimeVisible(true)]
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

           
        }
        public static readonly SKColor TextColor = SKColors.Black;

        public static Chart[] CreateXamarinSample()
        {
            var entries = new[]
            {
                new ChartEntry(33.4f)
                {
                    Label = "Switch",
                    ValueLabel = "33.4M",
                    Color = SKColor.Parse("#E52510"),
                    TextColor = TextColor
                },
                new ChartEntry(95.1f)
                {
                    Label = "PS4",
                    ValueLabel = "95.1M",
                    Color = SKColor.Parse("#003791"),
                      TextColor = TextColor
                },
                new ChartEntry(42.3f)
                {
                    Label = "Xbox One",
                    ValueLabel = "42.3M",
                    Color = SKColor.Parse("#107b10"),
                      TextColor = TextColor
                },
                new ChartEntry(74.4f)
                {
                    Label = "3DS",
                    ValueLabel = "74.4M",
                    Color = SKColor.Parse("#E52510"),
                    TextColor = TextColor
                }
            };

            return new Chart[]
            {
                new BarChart()
                {
                  Entries = entries ,
                  LabelTextSize = 35
                },
                new PointChart()
                 {
                  Entries = entries ,
                  LabelTextSize = 35
                  },
                new LineChart()
                {
                    Entries = entries,
                    LineMode = LineMode.Straight,
                    LineSize = 8,
                    PointMode = PointMode.Square,
                    PointSize = 18,
                    LabelTextSize = 35
                },
                new DonutChart() 
                { Entries = entries,
                  LabelTextSize = 35
                },
                new RadialGaugeChart() 
                { Entries = entries ,
                  LabelTextSize = 35
                },
                new RadarChart() 
                { 
                  Entries = entries ,
                  LabelTextSize = 35
                },
            };


    }

        protected override void OnAppearing()
        {
            var charts = CreateXamarinSample();
            this.chart1.Chart = charts[0];
            this.chart2.Chart = charts[1];
            this.chart3.Chart = charts[2];
            this.chart4.Chart = charts[3];
            this.chart5.Chart = charts[4];
            this.chart6.Chart = charts[5];
        }
    }
}

O ChartEntry fica responsável por ser o objeto para gerar cada dado separado do gráfico. Nele, podemos definir o valor, cor do gráfico, cor do texto e texto exibido.

O Chart é o tipo de gráfico que será exibido na tela. No exemplo, implementei os seis tipos para mostrar a diferença entre eles. Cada gráfico possui propriedades próprias de customização, deixando o controle bem flexível.

Vamos rodar:

Bem legal e simples, não?

Caso queira baixar o código utilizado no exemplo, acesse este link.

Quer ver outros artigos sobre Xamarin? Clique aqui.

Espero ter ajudado.

Aquele abraço!