Un gráfico XY es un componente de visualización de datos completo utilizado para representar gráficos de líneas y gráficos de barras en una disposición estándar de cuadrícula bidimensional. Presentado para reemplazar y consolidar esquemas de gráficos independientes más antiguos, elxychart-betamotor de renderizado procesa dinámicamente conjuntos de datos numéricos personalizados, escala automáticamente cuadrículas estructurales responsivas y permite mostrar múltiples series de datos independientes superpuestas al mismo tiempo.
Estructura básica de sintaxis
Cada gráfico XY comienza con elxychart-betaencabezado de declaración. A continuación se configura una matriz de categorías del eje X horizontal, un título del eje Y vertical o un límite de rango de datos, y al menos una serie de trazado de datos explícita (como un bloque delíneaobarrabloque).
xychart-beta
título "Gráfico de rendimiento de ejemplo"
eje-x [Ene, Feb, Mar, Abr]
eje-y "Ingresos (USD)"
barra [4500, 5200, 6100, 5800]
Referencia de sintaxis
La tabla a continuación desglosa las definiciones de datos principales y las claves de configuración necesarias para estructurar correctamente un gráfico XY en Mermaid.js.
| Componente de sintaxis | Formatos aceptados | Descripción y reglas de uso |
|---|---|---|
| Declaración | Palabra clave | Inicializa el espacio de trabajo del gráfico con disposición 2D. Debe usar exactamente el bloque de textoxychart-betabloque de cadena. |
| Título | Cadena entre comillas | Un encabezado global opcional que se muestra centrado inmediatamente encima de la cuadrícula del lienzo del gráfico. |
| Configuración del eje X | Lista entre corchetes / Rango | Define las etiquetas de escala horizontal. Acepta cadenas de texto categóricas dentro de corchetes[A, B, C] o rangos de puntos numéricos[100 --> 500]. |
| Configuración del eje Y | Cadena de título / Límites de escala | Configura los parámetros de escala vertical. Puede ser simplemente una cadena de título del eje, o personalizarse para limitar los rangos de valores inferior/superior usando"Título" 0 --> 100. |
| Serie de trazado de barras | Matriz numérica | Representa conjuntos de datos como barras verticales. La cantidad de elementos dentro del arreglo de datos debe coincidir perfectamente con la longitud de las categorías del eje X. |
| Serie de trazado de líneas | Matriz numérica | Representa conjuntos de datos como líneas continuas que conectan puntos de datos a través del área de trabajo de la cuadrícula. |
Personalización avanzada de datos (Directivas)
Puedes ajustar finamente el aspecto visual de tu área de trabajo de gráficos insertando un bloque de configuración de frontmatter en la parte superior absoluta de tu fragmento de código del documento. Esto te da un control total sobre el diseño, incluyendo colores hex personalizados, pesos de líneas de series de trazado y campos de visibilidad de la cuadrícula.
Matriz de atributos de configuración de gráfico XY
| Clave de configuración de propiedad | Opciones de valor | Resultado visual |
|---|---|---|
showLine |
verdadero | falso |
Alterna si las líneas de cuadrícula estructurales del eje de fondo se muestran a lo largo de las coordenadas. |
chartWidth |
Entero (píxeles) | Establece el ancho fijo de la disposición de lienzo delimitado del sistema de cuadrícula. |
alturaGráfico |
Entero (píxeles) | Establece la altura fija de la disposición de lienzo delimitado del sistema de cuadrícula. |
variablesTema.xyChart |
Matrices de asignación de colores | Inyecta bloques de color hexadecimales explícitos (por ejemplo, colorFondo, colorTitulo, o ranuras de lista de colores personalizados paletaColoresGrafico) en sus gráficos. |
Plano del mundo real: Comparación técnica multiserie
Este plano completo rastrea una revisión del rendimiento de la infraestructura. Utiliza una directiva de configuración personalizada para fijar los tamaños de las dimensiones del lienzo, mostrar las rutas de las líneas de cuadrícula de fondo e inyectar una paleta de colores hexadecimales explícita. Mapea cuatro fases trimestrales distintas, representándolas como un gráfico visual combinado (gráficos de series de barras superpuestas y gráficos de series de líneas juntos).
---
config:
xychart:
anchoGráfico: 700
alturaGráfico: 400
mostrarLinea: true
variablesTema:
xychart:
colorTitulo: "#0072B1"
paletaColoresGrafico: "#0072B1, #E06000"
---
xychart-beta
título "Métricas de Recursos vs Ejecución Q1-Q4"
eje-x ["Trimestre 1", "Trimestre 2", "Trimestre 3", "Trimestre 4"]
eje-y "Unidades de Métrica de Rendimiento" 0 --> 100
barra [45, 65, 80, 95]
línea [55, 60, 72, 88]
Consejo de sintaxis: Al superponer múltiples gráficos de datos (por ejemplo, ejecutando un barra conjunto de datos y un línea conjunto de datos dentro del mismo lienzo de disposición), el motor de renderizado los apilará o dibujará secuencialmente en el orden en que aparecen en el script de texto. Organice sus bloques de datos intencionalmente para evitar el recorte visual en las líneas del lienzo.
Errores comunes de sintaxis y limitaciones del sistema
Al compilar rutas de matrices dimensionales, algunos errores sutiles de configuración interrumpirán los cálculos de coordenadas. Tenga en cuenta estos parámetros de solución de problemas:
- Desajuste de longitud de datos: Cada
barraolíneala matriz de series de datos *debe* contener el mismo número exacto de elementos que el definido en tueje xparámetro de lista. Tener 4 categorías en tu eje X pero proporcionar una lista de datos con 5 números romperá completamente la compilación del gráfico. - Límites de comillas: Al especificar categorías dentro de corchetes de una lista de ejes, los bloques de texto que contienen espacios o caracteres especiales de puntuación deben encerrarse limpiamente entre comillas dobles (por ejemplo,
["Fase 1", "Fase 2"]). - Límites de coordenadas numéricas: Al establecer rangos manuales en una escala de eje (por ejemplo,
0 --> 500), debes usar explícitamente dos guiones seguidos por un símbolo de mayor que (-->). Olvidar un guión o separar los caracteres del operador con espacios provocará un error de procesamiento en el diseño. - Pesos enteros positivos: Los valores de escala se asignan a bloques de espacio lineal. Asegúrate de que los valores pasados a tus series no contengan elementos de carácter no escapados ni valores nulos vacíos dentro de los arreglos.