No post anterior, vimos, com detalhes, como criar um gráfico de barras; hoje iremos ver como criar um gráfico de pizza e rosca.
Obs.: veja o código completo ao final do post.
O primeiro passo é colocarmos os links CDNs entre as tags <head> e </head> do nosso HTML.
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script>
Apenas o primeiro link seria suficiente, mas poderá ter opções extras que fornecidas por esses outros dois pacotes que são interessantes de usarmos.
Entre as tags <body> e </body>, crie a seguinte div com canvas dentro:
<div> <canvas id="meuGrafico"></canvas> </div>
Criando gráfico de pizza
Abaixo da div, ainda dentro de <body>, digite as linhas abaixo.
<script>
const ctx = document.getElementById('meuGrafico');
new Chart(ctx, {
type: 'pie',
data: {
labels: ['Vermelho', 'Azul', 'Amarelo', 'Verde', 'Roxo', 'Laranja'],
datasets: [{
label: '# Cores',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
Veja o resultado,
Criando gráfico de rosca
Para criar o gráfico de rosca, siga os mesmos passos acima, mas troque type: ‘pie’, por type: ‘doughnut’,
<script>
const ctx = document.getElementById('meuGrafico');
new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Vermelho', 'Azul', 'Amarelo', 'Verde', 'Roxo', 'Laranja'],
datasets: [{
label: '# Cores',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
O resultado,
Logicamente que os dados data: [12, 19, 3, 5, 2, 3], e em labels: [‘Vermelho’, ‘Azul’, ‘Amarelo’, ‘Verde’, ‘Roxo’, ‘Laranja’], serão trazidos de um banco de dados.
Código Completo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inserir Texto</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script>
</head>
<body>
<div>
<canvas id="meuGrafico"></canvas>
</div>
<script>
const ctx = document.getElementById('meuGrafico');
new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Vermelho', 'Azul', 'Amarelo', 'Verde', 'Roxo', 'Laranja'],
datasets: [{
label: '# Cores',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
Inserindo título no gráfico
Podemos ver que não há título no gráfico que criamos. Podemos inserir usando o atributo title:
options: {
plugins: {
title: {
display: true,
text: 'Cores Votação',
color: 'blue',
font: {
weight: 'bold',
size: 20
}
},
}
}
Inserindo Rótulos no gráfico
Para fazer valores aparecerem nas partes da pizza ou da roscam devemos, antes de tudo, usar as linhas abaixo logo após const ctx = document.getElementById(‘meuGrafico’);
//Registre manualmente o plugin chartjs datalabels
Chart.register(ChartDataLabels);e então, usar dentro de plugins o trecho a seguir:
datalabels: {
// Posição dos rótulos
// (início, fim, centro, etc.)
anchor: 'end',
// Alinhamento dos rótulos
// (início, fim, centro, etc.)
align: 'end',
// cores dos rótulos
color: 'blue',
font: {
weight: 'bold',
},
formatter: function (value, context) {
// Mostre o valor atual dos dados
return value;
}
}
Veja código completo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inserir Texto</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script>
</head>
<body>
<div>
<canvas id="meuGrafico"></canvas>
</div>
<script>
const ctx = document.getElementById('meuGrafico');
//Registre manualmente o plugin chartjs datalabels
Chart.register(ChartDataLabels);
new Chart(ctx, {
type: 'pie',
data: {
labels: ['Vermelho', 'Azul', 'Amarelo', 'Verde', 'Roxo', 'Laranja'],
datasets: [{
label: '# Cores',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
plugins: {
title: {
display: true,
text: 'Cores Votação',
color: 'blue',
font: {
weight: 'bold',
size: 20
}
},
},
datalabels: {
// Posição dos rótulos
// (início, fim, centro, etc.)
anchor: 'end',
// Alinhamento dos rótulos
// (início, fim, centro, etc.)
align: 'end',
// cores dos rótulos
color: 'blue',
font: {
weight: 'bold',
},
formatter: function (value, context) {
// Mostre o valor atual dos dados
return value;
}
}
}
});
</script>
</body>
</html>