Gráfico de anillos de Chart.js
El gráfico de anillos también se llama gráfico de dona. Su esencia es un gráfico de pastel con la parte central vaciada.
El gráfico de anillos es una figura formada por dos o más gráficos de pastel de diferentes tamaños superpuestos, con la parte central eliminada.
-
El gráfico de pastel utiliza un círculo y el ángulo de los sectores circulares para representar el tamaño de los valores. Se utiliza principalmente para mostrar la proporción de los datos de cada componente en una muestra (o población) respecto al total, lo que es muy útil para estudiar problemas estructurales.
El gráfico de anillos es similar al gráfico de pastel, pero también hay diferencias. El gráfico de anillos tiene un "agujero" en el centro; cada muestra se representa con un anillo, y cada parte de los datos de la muestra se representa con un segmento del anillo. Por lo tanto, el gráfico de anillos puede mostrar las proporciones correspondientes de cada parte de múltiples muestras, lo que favorece el estudio comparativo de la composición.
Gráfico de anillostypeLa propiedad esdoughnut, type describe el tipo de gráfico.
const config = {
type: 'doughnut',
data: data,
};
A continuación, crearemos un gráfico de anillos simple:
Ejemplo
const data = {
labels: [
'Red',
'Blue',
'Yellow'
],
datasets: [{
label: 'Ejemplo de gráfico de anillos',
data: [300, 50, 100],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
],
hoverOffset: 4
}]
};
const config = {
type: 'doughnut',
data: data,
options: {
responsive: true, // Configurar el gráfico como responsivo, cambiando según el tamaño de la ventana
maintainAspectRatio: false,// Mantener la proporción original del gráfico
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
};
const myChart = new Chart(ctx, config);
Pruébalo »
El resultado del ejemplo anterior es:
Otras extensiones