Gráfico de Barras (Exemplo)

Repositório com app exemplo para o uso do gráfico de Barras.

O gráfico de barras é um gráfico com barras retangulares e comprimento proporcional aos valores que ele apresenta.

Alguns gráficos de barra apresentam barras agrupadas em grupos (gráficos de barras agrupadas) e outros mostram as barras divididas em sub-partes para mostrar efeito acumulativo. Um eixo do gráfico mostra especificamente o que está sendo comparado enquanto o outro eixo representa valores discretos.


11-04 13_55_10-Window 5-Window 2021-11-04 13_55_56-Window

Passos

1. Criando uma estrutura básica para a utilização do Framework

Exemplo com Barras Únicas

Screen Shot 2021-11-05 at 14 39 54

Exemplo com Barras empilhadas

Screen Shot 2021-11-05 at 14 31 09

Exemplo com Barras lado-a-lado

Screen Shot 2021-11-05 at 14 36 48

2. Alterando o título e os valores das barras

Onde alterar?

var barValuesOne: [CGFloat] = [50, 60, 70, 80, 90]

Primordialmente, cada gráfico de barras deve possuir um valor no seu topo, pois é uma representação de quantidades de alguma coisa. Para alterar esses valores, no gráfico de barras únicas alteramos esses parâmetros visualizados na imagem abaixo: bar valuesOne:

Screen Shot 2021-11-05 at 15 00 25

⚠️ Use o nome da classe do gráfico para instanciar o gráfico em seu projeto: DispersionGraph
⚠️ Passe como parâmetro, para o seu gráfico, uma matriz com CGPoints. Nesse primeiro exemplo temos apenas um dado na matriz, já que estamos analisando apenas um dado
⚠️ Lembre-se de setar uma configuração de tamanho para o seu gráfico. Recomendamos no mínimo 350x500

3. Personalizando o gráfico

Título

⚠️ Passe mais um parâmetro para o seu gráfico, com o título desejado
title: String
Captura de Tela 2021-11-04 às 13 53 47

Cores

⚠️ Passe para seu gráfico, como parâmetro, um vetor de Cores (tipo Color). Seu vetor deve conter a mesma quantidade de cores que as variáveis. No caso, vamos utilizar apenas uma cor por estarmos analisando apenas um par de dados variável

  • colors: [Color]

Captura de Tela 2021-11-04 às 13 55 42

Eixos

⚠️ Passe mais dois parâmetros para o seu gráfico, com o nome de cada eixo
⚠️ Lembre-se de declarar os eixos antes do valor da cor, quando for passar para a função do gráfico

  • eixoX: String
  • eixoY: String

Captura de Tela 2021-11-04 às 14 05 48

Legenda

⚠️ Passe mais um parâmetro para o seu gráfico, com o nome de cada variável

  • subtitle: [String]

Captura de Tela 2021-11-04 às 14 08 06

Teste com múltiplas variáveis

⚠️ Testando agora com mais um par de variáveis
⚠️ Para esse teste, não atribuímos cores pois o framework possui sua paleta padrão (para 7 pares de variávies no máximo)

Captura de Tela 2021-11-04 às 14 13 53