|
|
Os gráficos são gerados por meio da biblioteca chart.js, que é uma biblioteca feita em javascript que permite a geração de gráficos utlizando canvas.
|
|
# Configuração
|
|
|
|
|
|
|
|
Para deixar a configuração dos gráficos mais simples, foi criada uma camada com funções que realizam a configuração dos gráficos
|
|
|
|
|
|
|
|
|
|
Para iniciar a geração dos gráficos primeiro crie um objeto vazio e coloque um atributo chamado de datasets que será um vetor de objetos.
|
|
Função que permite ser colocado vários conjuntos de dados. (Ex: Nota, Taxa Aprovação, ...)
|
|
|
var grafico = {
|
|
|
|
|
datasets: [],
|
|
Os atributos:
|
|
|
|
- labels: Uma lista contendo as legendas do gráfico
|
|
|
|
- data: Conjunto de dados que compoem o gráfico
|
|
|
|
- options: Atributo opcional. Opções para alterar o visual do gráfico, o seu funcionamento será apresentado a seguir.
|
|
|
|
|
|
|
|
```js
|
|
|
|
var config = {
|
|
|
|
labels: ['LABEL-1', 'LABEL-2'],
|
|
|
|
data: dados
|
|
|
|
};
|
|
|
|
|
|
|
|
var config2 = {
|
|
|
|
labels: ['LABEL-3', 'LABEL-4'],
|
|
|
|
data: dados,
|
|
|
|
options: {
|
|
|
|
...
|
|
|
|
}
|
|
|
|
};
|
|
|
|
```
|
|
|
|
|
|
|
|
# Atributos Options
|
|
|
|
|
|
|
|
- **reverse** - boolean
|
|
|
|
- Inverte o eixo y para decrescente
|
|
|
|
- Exemplo:
|
|
|
|
|
|
|
|
```js
|
|
|
|
var config = {
|
|
|
|
labels: ['LABEL-1', 'LABEL-2'],
|
|
|
|
data: dados,
|
|
|
|
options: {
|
|
|
|
reverse: true
|
|
|
|
}
|
|
|
}
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
- **fill** - boolean
|
|
|
|
- Preenchimento do grafico, referente ao background color
|
|
|
|
- **stacked** - boolean
|
|
|
|
- Se os conjuntos de dados do eixo y devem ser somados
|
|
|
|
- **yAxes** - Object
|
|
|
|
- Configuração manual do yAxes
|
|
|
|
- **maxAll** - number(integer/float)
|
|
|
|
- Configura para todos conjuntos de dados do eixo y possuirem o mesmo máximo
|
|
|
|
- **setpSizeAll** - number(integer/float)
|
|
|
|
- Semelhante ao maxAll, mas configura o intervalo entre os números que será mostrado no gráfico
|
|
|
|
- **tooltipCallbackLabel** - Object
|
|
|
|
- Personalização do texto mostrado ao colocar o mouse sobre um ponto no gráfico
|
|
|
|
- **yAxisID** - Array of strings
|
|
|
|
- Identificadores para cada conjunto de dados do eixo y. A configuração dos próximos atributos dependem da existência do yAxisID
|
|
|
|
- **displayGridlines** - Object
|
|
|
|
- Se a linhas horizontais dos gráficos devem sem disponibilizadas
|
|
|
|
- **updateMax** - Object
|
|
|
|
- Atualiza o valor máximo de um determinado conjunto de dados
|
|
|
|
- **yAxesDisplay** - Object
|
|
|
|
- Se os valores do eixo devem ser mostrados
|
|
|
|
- **yAxesPosition** - Object
|
|
|
|
- Localização dos valores do eixo
|
|
|
|
|
|
|
|
# Cores
|
|
|
|
|
|
|
|
Cores pré definidas
|
|
|
|
|
|
|
|
- red
|
|
|
|
- blue
|
|
|
|
- green
|
|
|
|
- purple
|
|
|
|
- blue_alpha
|
|
|
|
- ligh_blue_alpha
|
|
|
|
- brown
|
|
|
|
- orange
|
|
|
|
- light_orange
|
|
|
|
- yellow
|
|
|
|
- gray
|
|
|
|
- cyan
|
|
|
|
|
|
|
|
---
|
|
---
|
|
|
|
|
|
|
|
# function setDataset(type, textLabel, stacked, yaxis, color)
|
|
# Funções
|
|
|
|
|
|
|
|
Função que permite ser colocado vários conjuntos de dados. (Ex: Nota, Taxa Aprovação, ...)
|
|
A seguir estão listadas todas as funções que geram os gráficos, com exemplos do que pode ser gerado.
|
|
|
|
|
|
|
|
Os parametros:
|
|
Todos os gráficos possuem os mesmos parametros.
|
|
|
- type: É o tipo do gráfico que será gerado, normalmente 'line' ou 'bar'
|
|
|
|
|
- textLabel: É o nome do conjunto de dados, por exemplo: IRA
|
|
|
|
|
- stacked: Se os gráficos são do tipo stacked, ou seja, se tiver mais de um conjunto de dados a posição no eixo y será equivalente a soma.
|
|
|
|
|
- yaxis: Apelido para o eixo y
|
|
|
|
|
- color: Vetor composto de dois valores, o primeiro sendo a cor da borda e o
|
|
|
|
|
sendo a cor do preenchimento
|
|
|
|
|
|
|
|
|
|
Para cada conjunto de dados existentes deve ser chamada a função setDataset e colocando o resultado no grafico:
|
|
### Parametros
|
|
|
grafico.datasets.push(setDataset(...));
|
|
|
|
|
|
|
|
|
|
Depois adicione os as labels e os dados
|
|
- **ctx**: Context do canvas onde será desenhado o gráfico
|
|
|
|
- **chart**: As configurações do gráfico
|
|
|
|
- **colors**: Parametro opcional. Vetor de string contendo os nomes das cores que vão ser utilizadas
|
|
|
|
|
|
|
|
grafico.labels = labels;
|
|
|
|
|
``` js
|
|
|
|
|
// Seja dados um vetor que contem vetores de dados
|
|
|
|
|
// dados =[ [1,2,3], [2,3,4] ];
|
|
|
|
|
|
|
|
|
|
for (d in dados) {
|
|
## Gráficos de Linha
|
|
|
grafico.datasets[d].data = dados[d];
|
|
|
|
|
}
|
|
```js
|
|
|
|
function build_line_chart(ctx, chart, colors=['blue_alpha', 'cyan', 'purple', 'grey'])
|
|
|
|
```
|
|
|
|
|
|
|
|
**Chamada**
|
|
|
|
|
|
|
|
```js
|
|
|
|
var config = {...};
|
|
|
|
|
|
|
|
build_line_chart(ctx, config);
|
|
|
|
|
|
|
|
build_line_chart(ctx, config, ['blue', 'red', 'green']);
|
|
|
|
```
|
|
|
|
|
|
|
|
**Gráficos**
|
|
|
|
|
|
|
|
|
|
|
|
## Gráficos de Barra
|
|
|
|
|
|
|
|
```js
|
|
|
|
function build_bar_chart(ctx, chart, colors=['blue_alpha', 'cyan'])
|
|
|
|
```
|
|
|
|
|
|
|
|
**Chamada**
|
|
|
|
|
|
|
|
```js
|
|
|
|
var config = {...};
|
|
|
|
|
|
|
|
build_bar_chart(ctx, config);
|
|
|
|
|
|
|
|
build_line_chart(ctx, config, ['yellow', 'light_blue', 'cyan']);
|
|
|
|
```
|
|
|
|
|
|
|
|
**Gráficos**
|
|
|
|
|
|
|
|
## Gráficos de Linha/Barra
|
|
|
|
|
|
|
|
```js
|
|
|
|
function build_line_bar_chart(ctx, chart, colors=['orange', 'blue_alpha'])
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
Após você deve configurar os eixos. Se o eixo y possuir escalas diferentes, devera ser configurado para cada escala.
|
|
**Chamada**
|
|
|
Para isto basta usar a função
|
|
|
|
|
|
```js
|
|
|
|
var config = {...};
|
|
|
|
|
|
|
|
build_bar_chart(ctx, config);
|
|
|
|
|
|
|
|
build_line_bar_chart(ctx, config, ['red', 'yellow', 'blue']);
|
|
|
|
```
|
|
|
|
|
|
|
|
**Gráficos**
|
|
|
|
|
|
|
|
## Gráficos de Linha com Erro
|
|
|
|
|
|
|
|
```js
|
|
|
|
function build_symmetric_error_line_chart(ctx, chart, colors=['blue_alpha', 'blue'])
|
|
|
|
```
|
|
|
|
|
|
|
|
# function setTicks(beginAtZero, stepSize, suggestedMax, max, min, reverse)
|
|
**Chamada**
|
|
|
|
|
|
|
|
```js
|
|
|
|
var config = {...};
|
|
|
|
|
|
|
|
build_symmetric_error_line_chart(ctx, chart);
|
|
|
|
|
|
|
|
build_symmetric_error_line_chart(ctx, chart, ['red', 'yellow', 'grey', 'brown']);
|
|
|
|
```
|
|
|
|
|
|
|
|
**Gráficos**
|
|
|
|
|
|
|
|
## Gráficos de Barra com Erro
|
|
|
|
|
|
|
|
```js
|
|
|
|
function build_symmetric_error_bar_chart(ctx, chart, colors=['orange', 'brown', 'blue_alpha', 'blue'])
|
|
|
|
```
|
|
|
|
|
|
|
|
- beginAtZero: Booleano informando se o primeiro valor da escala deve ser zero
|
|
**Chamada**
|
|
|
- stepSize: Os valores de posição do eixo y. Exemplo: se stepSize for 2 o eixo ficará 0, 2, 4, 6, 8, ...
|
|
|
|
|
- suggestedMax: Qual o valor maximo inicial do gráfico, o gráfico será reajustado se houver valores maiores
|
|
```js
|
|
|
- max: Valor máximo do grafico
|
|
var config = {...};
|
|
|
- min: Valor minimo do grafico
|
|
|
|
|
- reverse: Se o eixo deve ser invertido, trocar ordem crescente por decrescente
|
|
build_symmetric_error_bar_chart(ctx, chart);
|
|
|
|
|
|
|
|
build_symmetric_error_bar_chart(ctx, chart, ['blue', 'cyan']);
|
|
|
|
```
|
|
|
|
|
|
|
|
**Gráficos**
|
|
|
|
# Exemplos
|
|
|
|
|
|
|
|
Segue um conjunto de exemplos, com a configuração e o resultado.
|
|
|
|
|
|
|
|
---
|
|
---
|
|
|
|
|
|
|
|
# function configAxes(simple, type, display, position, id, gridlines, ticks, stacked)
|
|
### Exemplo 1
|
|
|
|
|
```js
|
|
|
- simple: Booleano indicando se o gráfico a ser gerado deve ser simples ou complexo
|
|
var mes = [
|
|
|
- simples: Apenas para um conjunto de dados, usada normalmente se houver apenas um conjunto de dados
|
|
['Janeiro', [20, 13.3]],
|
|
|
- complexo: Mais de um conjunto de dados, usada normalmente so houver mais de um conjunto de dados
|
|
['Fevereiro', [32, 0.5]],
|
|
|
- type: O tipo dos valores, normalmente linear
|
|
['Março', [12, 15.6]],
|
|
|
- display: Booleano indicado se a escala deve ser exibida
|
|
['Abril', [18, 8.4]]
|
|
|
- position: Qual o posicionamento da escala, normalmente left ou right
|
|
];
|
|
|
- id: Deve ser o mesmo id que foi atribuido no setDataset, se for o caso
|
|
|
|
|
- gridlines: Se devem ser exibidas linhas no eixo
|
|
var config = {
|
|
|
- ticks: Um objeto contendo o retorna da função setTicks
|
|
data:dados,
|
|
|
- stacked: Representa o gráfico da forma stacked
|
|
labels: ['Valor-1', 'Valor-2'],
|
|
|
Esta função deve ser usada para preencher valores de um objeto
|
|
options:{
|
|
|
var scales={
|
|
yAxisID: ['id1', 'id2'],
|
|
|
xAxes: [configAxes(...)],
|
|
stacked: false,
|
|
|
yAxes: [configAxes(...), configAxes(...)],
|
|
yAxesPosition: {'id2': 'left'},
|
|
|
};
|
|
fill: false,
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
var ctx = document.getElementById('canvas').getContext('2d');
|
|
|
|
|
|
|
|
build_line_chart(ctx, config, ['cyan', 'yellow']);
|
|
|
|
```
|
|
|
|
**Resultado**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
---
|
|
|
|
|
|
|
|
# function chartConfig(type, data, scales, fill_line)
|
|
### Exemplo2
|
|
|
- type: O tipo do gráfico, linha, barra ou outros.
|
|
|
|
|
- data: O objeto grafico
|
|
```js
|
|
|
- scales: O objeto scales
|
|
var mes = [
|
|
|
- fill_line: Booleano indicando se o gráfico possui preenchimento
|
|
['Janeiro', [20, 13.3]],
|
|
|
|
['Fevereiro', [32, 0.5]],
|
|
|
|
['Março', [12, 15.6]],
|
|
|
|
['Abril', [18, 8.4]]
|
|
|
|
];
|
|
|
|
|
|
|
|
var config = {
|
|
|
|
data:dados,
|
|
|
|
labels: ['Valor-1', 'Valor-2'],
|
|
|
|
options:{
|
|
|
|
yAxisID: ['id1', 'id2'],
|
|
|
|
updateMax: {'id1': 100},
|
|
|
|
stacked: false,
|
|
|
|
stepSizeAll: 15.5,
|
|
|
|
yAxesPosition: {'id1': 'right'},
|
|
|
|
yAxesDisplay: {'id2': false},
|
|
|
|
fill: true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
var ctx = document.getElementById('canvas').getContext('2d');
|
|
|
|
|
|
|
|
build_line_chart(ctx, config, ['cyan', 'yellow']);
|
|
|
|
```
|
|
|
|
|
|
|
|
Finalizando você precisa obter o context do canvas:
|
|
**Resultado**
|
|
|
var ctx = document.getElementById("canvas").getContext("2d");
|
|
 |
|
|
window.myLine= new Chart(ctx, chartConfig(...)); |
|
\ No newline at end of file |
|
\ No newline at end of file |
|
|
