|
|
|
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.
|
|
|
|
|
|
|
|
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.
|
|
|
|
var grafico = {
|
|
|
|
datasets: [],
|
|
|
|
}
|
|
|
|
|
|
|
|
- function setDataset(type, textLabel, stacked, yaxis, color)
|
|
|
|
|
|
|
|
Função que permite ser colocado vários conjuntos de dados. (Ex: Nota, Taxa Aprovação, ...)
|
|
|
|
|
|
|
|
Os 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:
|
|
|
|
grafico.datasets.push(setDataset(...));
|
|
|
|
|
|
|
|
Depois adicione os as labels e os dados
|
|
|
|
grafico.labels = labels;
|
|
|
|
// Seja dados um vetor que contem vetores de dados
|
|
|
|
// dados = [[1,2,3],[2,3,4]];
|
|
|
|
for (d in dados) {
|
|
|
|
grafico.datasets[d].data = dados[d];
|
|
|
|
}
|
|
|
|
|
|
|
|
Após você deve configurar os eixos. Se o eixo y possuir escalas diferentes, devera ser configurado para cada escala.
|
|
|
|
Para isto basta usar a função
|
|
|
|
- function setTicks(beginAtZero, stepSize, suggestedMax, max, min, reverse)
|
|
|
|
|
|
|
|
- beginAtZero: Booleano informando se o primeiro valor da escala deve ser zero
|
|
|
|
- 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
|
|
|
|
- max: Valor máximo do grafico
|
|
|
|
- min: Valor minimo do grafico
|
|
|
|
- reverse: Se o eixo deve ser invertido, trocar ordem crescente por decrescente
|
|
|
|
|
|
|
|
- function configAxes(simple, type, display, position, id, gridlines, ticks, stacked)
|
|
|
|
|
|
|
|
- simple: Booleano indicando se o gráfico a ser gerado deve ser simples ou complexo
|
|
|
|
- simples: Apenas para um conjunto de dados, usada normalmente se houver apenas um conjunto de dados
|
|
|
|
- complexo: Mais de um conjunto de dados, usada normalmente so houver mais de um conjunto de dados
|
|
|
|
- type: O tipo dos valores, normalmente linear
|
|
|
|
- display: Booleano indicado se a escala deve ser exibida
|
|
|
|
- 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
|
|
|
|
- ticks: Um objeto contendo o retorna da função setTicks
|
|
|
|
- stacked: Representa o gráfico da forma stacked
|
|
|
|
Esta função deve ser usada para preencher valores de um objeto
|
|
|
|
var scales = {
|
|
|
|
xAxes: [configAxes(...)],
|
|
|
|
yAxes: [configAxes(...), configAxes(...)],
|
|
|
|
};
|
|
|
|
|
|
|
|
- function chartConfig(type, data, scales, fill_line)
|
|
|
|
- type: O tipo do gráfico, linha, barra ou outros.
|
|
|
|
- data: O objeto grafico
|
|
|
|
- scales: O objeto scales
|
|
|
|
- fill_line: Booleano indicando se o gráfico possui preenchimento
|
|
|
|
|
|
|
|
Finalizando você precisa obter o context do canvas:
|
|
|
|
var ctx = document.getElementById("canvas").getContext("2d");
|
|
|
|
window.myLine= new Chart(ctx, chartConfig(...)); |
|
|
|
\ No newline at end of file |
