Skip to main content

🕸️ Gráfico de Radar (Radar Chart)

Muestra datos multivariados en forma de una "telaraña" bidimensional con un eje para cada variable.


![Demostración del uso del componente]

1. Gráfico de Radar Básico

{
type: 'radar',
data: {
labels: ['Fuerza', 'Velocidad', 'Resistencia', 'Inteligencia', 'Suerte'],
datasets: [{
label: 'Persona A',
data: [8, 6, 9, 7, 5],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)'
}]
}
}

2. Gráfico de Radar Comparativo

Puedes comparar dos o más series de datos añadiendo más objetos al array datasets.

{
type: 'radar',
data: {
labels: ['Fuerza', 'Velocidad', 'Resistencia', 'Inteligencia', 'Suerte'],
datasets: [
{
label: 'Héroe A',
data: [8, 6, 9, 7, 5],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)'
},
{
label: 'Héroe B',
data: [6, 9, 7, 8, 6],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)'
}
]
}
}

3. Gráfico de Radar con Estilos Personalizados

Puedes personalizar la apariencia de los puntos y las líneas para cada dataset.

{
type: 'radar',
data: {
labels: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun'],
datasets: [{
label: 'Ventas Proyectadas',
data: [65, 59, 90, 81, 56, 55],
fill: true,
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgb(75, 192, 192)',
pointBackgroundColor: 'rgb(75, 192, 192)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(75, 192, 192)'
}]
}
}

📖 Propiedades Clave del Dataset

PropiedadTipoDescripción
labelstringEl nombre del conjunto de datos, que aparece en la leyenda y los tooltips.
datanumber[]Array de valores numéricos para cada eje del radar.
backgroundColorstringColor del área rellena dentro de la telaraña. Se recomienda usar transparencia (RGBA).
borderColorstringColor de la línea que conecta los puntos.
pointBackgroundColorstringColor de relleno de los puntos en cada eje.

📖 Propiedades Clave del objeto data

PropiedadTipoDescripción
labelsstring[]Array de etiquetas para cada eje del gráfico de radar.
datasetsobject[]Arreglo de objetos que representan cada serie de datos. Ver la tabla "Propiedades Clave del Dataset".

📖 Propiedades Clave del objeto options

PropiedadTipoDescripción
titlestringDefine un título para el gráfico (menor prioridad que el Input() title).
tooltipLabelFormatstringFormato para los tooltips (ej. '{l}: {v}'). {l} es la etiqueta y {v} es el valor.
tooltipCallbackfunctionFunción para generar HTML personalizado en los tooltips (mayor prioridad que tooltipLabelFormat).