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.

Exemplo de Gráficos de Barras por nosso app:

Passos

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

Exemplo com Barras Únicas

Exemplo com Barras empilhadas

Exemplo com Barras lado-a-lado

2. Alterando a altura e os valores no topo das barras

Onde alterar?

Altura da Barra: var barValuesOne: [CGFloat] = [50, 60, 70, 80, 90] Valores escritos: var labelValuesOne: [String] = ["A", "B", "C", "D", "E"]

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:

⚠️ Não necessariamente os valores das alturas devem ser os mesmos daqueles escritos, o importante é que a proporção seja respeitada. Se num gráfico de barras, uma delas possui valor 500 e a outra de 50, a proporção é de 10:1 e portanto colocar como valores de altura 5 e 50 produzirá o mesmo aspecto
⚠️ Para alterar os gráficos de Barras Empilhadas e o de Barras lado-a-lado,

3. Personalizando o gráfico

Título e Descrição

⚠️ Para trocar o título e a descrição, altere os valores contidos abaixo:

Cor e Largura das Barras

⚠️ Para alterar a cor e a largura das barras, altere os parâmetros como demonstrado na figura abaixo: