Criando gráficos com Chart.js
Os gráficos de linhas e barras são gráficos muito utilizados no mundo empresarial. O gráfico de linha é usado para mostrar tendências, comparar conjuntos de dados, mostrar evoluções e diminuições de algum fenômeno. Apresenta a variação de valores dos dados em determinado período.
Se você ainda não viu o artigo Iniciando com Chart.js, acesse-o no link:https://www.mundojs.com.br/iniciando-com-chart-js/
LINHA:
O gráfico de linhas é uma maneira de mostrar os pontos de dados em uma linha. O gráfico em linha permite que um número de propriedades seja especificado para cada um dos conjuntos de dados.
Ao criar o seu documento HTML base, você deverá adicionar um Canvas na sua página.
<!-- adicione a tag canvas no seu HTML --> <canvas id="myChart"></canvas>
Com o Canvas adicionado, você precisará incluir a biblioteca Chart.js na sua página.
<!-- o link a seguir direciona para a biblioteca online do Chart.js --> <!-- a biblioteca também está disponível para download no site do Chart.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
Para criar um gráfico do tipo Linha, você usará o seguinte código:
// criando um novo objeto, contendo o tipo, os dados
// e as opções que o gráfico terá.
let ctx = document.getElementById('myChart');
let chart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
Onde:
Type:
É o tipo de gráfico que será feito;
Data:
Os dados que serão inseridos no gráfico.
Options:
As customizações que você fará no seu gráfico.
TYPE:
Este valor define de qual tipo será o gráfico. Você deve utilizar ‘line’ para o formato LINHA.
// type:'line'
DATA:
Para a construção do gráfico, é necessário que os datasets contenham os valores a ser inseridos no gráfico. Para isto, cria-se um vetor com os valores necessários.
Você também poderá inserir uma legenda (label) para a linha do gráfico.
// O objeto data possui os valores dispostos no gráfico
data: {
// Legendas das Linhas
labels: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho'],
datasets: [{
// Legenda
label: 'Meu primeiro gráfico',
// Define-se a cor da linha.
borderColor: 'rgb(245,222,179)',
// Dados a serem inseridos nas barras
data: [0, 10, 5, 2, 20, 12, 1],
}]
}
OPTIONS:
Esse objeto define as opções a serem inseridas no seu gráfico. Confira as diversas customizações disponíveis para o seu tipo de gráfico em: https://www.chartjs.org/docs/latest/charts/line.html.
O exemplo a seguir utilizará a opção tension, que define se as linhas serão retas ou possuirão algum tipo de curvatura.
// Esta opção define se as linhas serão curvadas ou retas,
// use 0 para retas.
options: {
elements: {
line: {
tension: 0
}
}
}
BARRAS:
O gráfico de barras mostra os valores dos dados com barras verticais. É muito utilizado para mostrar dados de tendências e comparação de vários conjuntos de dados. Cada barra retangular é correspondente a uma categoria e proporcional ao valor do dado na respectiva categoria.
De maneira semelhante à criação do gráfico em linhas, utilizaremos a mesma estrutura HTML para o gráfico de barras.
Para criar um gráfico do tipo Barra, você usará o seguinte código:
// criando um novo objeto, contendo o tipo, os dados
// e as opções que o gráfico terá.
let ctx = document.getElementById('myChart');
let myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
TYPE:
Este valor define de qual tipo será o gráfico. Você deve utilizar ‘bar’ para o formato BARRA VERTICAL e ‘horizontalBar’ para o formato BARRA HORIZONTAL.
// type: 'bar' // type: 'horizontalBar'
DATA:
Assim como no gráfico em Linhas, é necessário que os datasets contenham um vetor com os valores a ser inseridos no gráfico. Você deve especificar também as cores de cada retângulo, sendo uma cor para cada valor no vetor. Também pode inserir legendas. Confira mais opções em: https://www.chartjs.org/docs/latest/charts/bar.html
// O objeto data possui os valores dispostos no gráfico
data: {
// Legendas das Barras
labels: ['Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
datasets: [{
// Legenda geral
label: '$ em Vendas',
// Dados a serem inseridos nas barras
data: [10, 9, 12, 19, 21, 7],
// Define as cores de preenchimento das barras
// de acordo com sua posição no vetor
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
// Define as cores de preenchimento das bordas das barras
// de acordo com sua posição no vetor
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
// Define a espessura da borda dos retângulos
borderWidth: 1
}]
},
OPTIONS:
Esse objeto define as opções a serem inseridas no seu gráfico. Você também pode conferir as diversas opções de customização na documentação do Chart.js.
Neste exemplo será utilizada a opção beginAtZero, que tem a função de começar a barra no valor 0 do eixo X.
// Customização que define onde irá começar a ser erguida a barra
// começando pelo ZERO, no eixo X.
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}