🕸️ 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
| Propiedad | Tipo | Descripción |
|---|---|---|
label | string | El nombre del conjunto de datos, que aparece en la leyenda y los tooltips. |
data | number[] | Array de valores numéricos para cada eje del radar. |
backgroundColor | string | Color del área rellena dentro de la telaraña. Se recomienda usar transparencia (RGBA). |
borderColor | string | Color de la línea que conecta los puntos. |
pointBackgroundColor | string | Color de relleno de los puntos en cada eje. |
📖 Propiedades Clave del objeto data
| Propiedad | Tipo | Descripción |
|---|---|---|
labels | string[] | Array de etiquetas para cada eje del gráfico de radar. |
datasets | object[] | Arreglo de objetos que representan cada serie de datos. Ver la tabla "Propiedades Clave del Dataset". |
📖 Propiedades Clave del objeto options
| Propiedad | Tipo | Descripción |
|---|---|---|
title | string | Define un título para el gráfico (menor prioridad que el Input() title). |
tooltipLabelFormat | string | Formato para los tooltips (ej. '{l}: {v}'). {l} es la etiqueta y {v} es el valor. |
tooltipCallback | function | Función para generar HTML personalizado en los tooltips (mayor prioridad que tooltipLabelFormat). |