Criando gráficos com Chart.js
Os gráficos Donut(Doughnut) e Pizza(Pie) são, provavelmente, os gráficos mais utilizados atualmente. Eles são divididos em segmentos, e cada segmento é proporcional ao valor de cada dado. Esses segmentos são divididos na forma de arcos.
Se você ainda não leu o artigo Iniciando com Chart.js, acesse-o no link: https://www.mundojs.com.br/iniciando-com-chart-js/
Estes dois tipos de gráficos são excelentes para demonstrar as proporções entre os dados inseridos.
O gráfico do tipo Donut e do tipo pizza são do mesmo tipo no Chart.js, com a diferença de um único objeto, denominado cutoutPercentage. Este valor define o tamanho do espaço central vazio do gráfico, e possui como valor padrão 50%.
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 o 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 fazer um gráfico do tipo Donut, 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 meuDonutChart = new Chart(ctx, {
type: 'doughnut',
data: dados,
options: opcoes
});
Onde:
type: É o tipo de gráfico que será feito.
data: Os dados que serão inseridos no gráfico.
options: Serão as customizações que você fará no seu gráfico.
TYPE:
Este valor define de qual tipo será o gráfico. Você deve utilizar ‘pie’ para o formato PIZZA e ‘doughnut’ para o formato DONUT.
// type: 'doughnut' // type: 'pie'
DATA:
Para construir o gráfico, é necessário que os datasets contenham um vetor com os valores a serem inseridos. Estes valores serão somados em um total e calculados levando em consideração a proporção relativa de cada dado.
Você poderá inserir uma legenda (label) para cada pedaço do gráfico. Verifique a estrutura no código abaixo:
// Cria-se um objeto chamado dados onde:
let dados = {
datasets: [{
// cria-se um vetor data, com os valores a ser dispostos no gráfico
data: [10, 20, 30],
// cria-se uma propriedade para adicionar cores aos respectivos valores do vetor data
backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 199, 132)', 'rgb(55, 99, 132)']
}],
// cria-se legendas para os respectivos valores do vetor data
labels: ['Vermelho', 'Amarelo', 'Azul']
};
OPTIONS:
Este objeto define as opções a ser inseridas no seu gráfico. Confira as diversas opções de customizações para o seu gráfico no link: https://www.chartjs.org/docs/latest/charts/doughnut.html.
O exemplo a seguir utilizará a opção cutoutPercentage, que, juntamente com o atributo “type”, define se o gráfico será do padrão Pizza ou Donut. Se esta opção não estiver definida, trará como valor padrão 50%. Se você utilizar o valor 0, retornará um gráfico sem espaço central. Confira no código abaixo:
// Crie um objeto que defina as opções customizáveis
// do seu gráfico.
let opcoes = {
cutoutPercentage: 40,
};
Confira o código completo realizando o download: Exemplo Chart.js
Neste artigo, foi realizada a configuração de dois gráfico, Pizza e Donut, utilizando a biblioteca Chart.js. Gostou? Comente ou tire suas dúvidas!