Introducción al gráfico de radar
El gráfico de radar es una forma sencilla de representar datos de baja dimensión en formato circular.
El gráfico de radar también se conoce como gráfico de araña, gráfico de estrella, gráfico de red o gráfico polar.
Aplicación
El gráfico de radar resulta especialmente útil para desarrolladores, científicos de datos e ingenieros que necesitan representar datos de forma clara y concisa en formato circular.
Suele usarse para resumir y comparar gráficamente el rendimiento de varias entidades en múltiples dimensiones.
Sintaxis
Copiar
Insertar
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
... More Fields ...
Ejemplo
Copiar
Insertar
---
title: "Grades"
---
radar-beta
axis m["Math"], s["Chinese"], e["English"]
axis h["History"], g["Geography"], a["Art"]
curve a["Alice"]{85, 90, 80, 70, 75, 90}
curve b["Bob"]{70, 75, 85, 80, 90, 85}
max 100
min 0
Detalles de la sintaxis
Título
title: se renderiza en la parte superior del gráfico de radar.
Copiar
Insertar
radar-beta
title Title of the Radar Diagram
...
Eje
axis: la sintaxis axis se usa para definir los ejes del gráfico de radar.
Cada eje se representa con un ID y una etiqueta opcional.
Puedes definir varios ejes en una sola línea.
Copiar
Insertar
radar-beta
axis id1["Label1"]
axis id2["Label2"], id3["Label3"]
...
Curva
curve: la sintaxis curve se usa para definir los puntos de datos de las curvas del gráfico de radar.
Cada curva se representa con un ID, una etiqueta opcional y una lista de valores.
Los valores pueden definirse con una lista de números o una lista de pares clave-valor. Si se usan pares clave-valor, la clave representa el ID del eje y el valor representa el punto de datos.
Puedes definir varias curvas en una sola línea.
Copiar
Insertar
radar-beta
axis axis1, axis2, axis3
curve id1["Label1"]{1, 2, 3}
curve id2["Label2"]{4, 5, 6}, id3{7, 8, 9}
curve id4{ axis3: 30, axis1: 20, axis2: 10 }
...
Opciones
- showLegend: la sintaxis showLegend se usa para mostrar u ocultar la leyenda del gráfico de radar; de forma predeterminada se muestra.
- max: el valor máximo del gráfico de radar, que se usa para escalar el gráfico de radar. Si no se proporciona, el valor máximo se calcula a partir de los puntos de datos.
- min: el valor mínimo del gráfico de radar, que se usa para escalar el gráfico de radar. Si no se proporciona, el valor mínimo es 0.
- graticule: la sintaxis graticule se usa para definir el tipo de líneas de retícula que se van a renderizar en el gráfico de radar. Las líneas de retícula pueden ser circle o polygon. Si no se proporciona, el valor predeterminado es circle.
- ticks: la sintaxis ticks se usa para definir el número de marcas de las líneas de retícula. Es la cantidad de círculos concéntricos o polígonos dibujados, que indica la escala del gráfico de radar. Si no se proporciona, el número de marcas predeterminado es 5.
Copiar
Insertar
radar-beta
...
showLegend true
max 100
min 0
graticule circle
ticks 5
...
Configuración
| Parámetro | Descripción | Valor predeterminado |
|---|---|---|
| width | El ancho del gráfico de radar | 600 |
| height | La altura del gráfico de radar | 600 |
| marginTop | El margen superior del gráfico de radar | 50 |
| marginBottom | El margen inferior del gráfico de radar | 50 |
| marginLeft | El margen izquierdo del gráfico de radar | 50 |
| marginRight | El margen derecho del gráfico de radar | 50 |
| axisScaleFactor | El factor de escala del eje | 1 |
| axisLabelFactor | Factor que ajusta la posición de las etiquetas del eje | 1.05 |
| curveTension | La tensión de las curvas redondeadas | 0.17 |
Variables de tema
Variables de tema globales
Los valores predeterminados de estas variables dependen del tema que se use. Para sobrescribir los valores predeterminados, establece los valores deseados en la sección themeVariables de la configuración: config: themeVariables: cScale0: "#FF0000" cScale1: "#00FF00"
El gráfico de radar admite la escala de color cScale${i}, donde i es un número de 0 al número máximo de colores de la escala de color del tema. Normalmente, el número máximo de colores es 12.
| Propiedad | Descripción |
|---|---|
| fontSize | El tamaño de fuente del título |
| titleColor | El color del título |
| cScale$ | La escala de color de la i-ésima curva |
Opciones de estilo del radar
Las variables específicas del radar se encuentran dentro de la clave radar. Para establecer opciones de estilo del radar, usa la siguiente sintaxis. config: themeVariables: radar: axisColor: "#FF0000"
| Propiedad | Descripción | Valor predeterminado |
|---|---|---|
| axisColor | El color de la línea del eje | black |
| axisStrokeWidth | El ancho de la línea del eje | 1 |
| axisLabelFontSize | El tamaño de fuente de la etiqueta del eje | 12px |
| curveOpacity | La opacidad de la curva | 0.7 |
| curveStrokeWidth | El ancho de la curva | 2 |
| graticuleColor | El color de las líneas de retícula | black |
| graticuleOpacity | La opacidad de las líneas de retícula | 0.5 |
| graticuleStrokeWidth | El ancho de las líneas de retícula | 1 |
| legendBoxSize | El tamaño del recuadro de la leyenda | 10 |
| legendFontSize | El tamaño de fuente de la leyenda | 14px |
Ejemplo de configuración y tema
Copiar
Insertar
---
config:
radar:
axisScaleFactor: 0.25
curveTension: 0.1
theme: base
themeVariables:
cScale0: "#FF0000"
cScale1: "#00FF00"
cScale2: "#0000FF"
radar:
curveOpacity: 0
---
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
curve c3{3,3,3,3,3}
