Diagrama XY
El gráfico XY es un módulo de gráficos integral, un gráfico que usa el eje x y el eje y para representar datos
Ejemplo
Copiar
Insertar
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
Sintaxis
Todos los valores de texto que contienen una sola palabra pueden escribirse sin comillas dobles. Si el valor de texto contiene varias palabras, especialmente si incluye espacios, hay que encerrarlo entre comillas dobles.
Dirección
El gráfico puede dibujarse horizontal o verticalmente; el valor predeterminado es vertical.
Copiar
Insertar
xychart-beta horizontal
...
Título
El título es una breve descripción del gráfico y siempre se renderiza en la parte superior del gráfico.
Ejemplo
Copiar
Insertar
xychart-beta
title "This is a simple example"
...
Eje x
El eje x representa principalmente valores de categoría, aunque también puede usarse como rango numérico.
Ejemplo
- mermaid.grammar_quadrant_example_x_axis_min_max_use
- mermaid.grammar_quadrant_example_x_axis_title_text
Eje y
El eje y se usa para representar un rango numérico; no puede tener valores de categoría.
Ejemplo
- y-axis title min --> max
- Solo añadirá el título; el rango se generará automáticamente a partir de los datos
Gráfico de líneas
El gráfico de líneas ofrece la función de mostrar líneas de forma gráfica.
Ejemplo
- mermaid.grammar_quadrant_example_line_2_3_valide
- mermaid.grammar_quadrant_example_line_series_2_3_valide
Gráfico de barras
El gráfico de barras puede mostrar barras de forma gráfica.
Ejemplo
- mermaid.grammar_quadrant_example_bar_2_3_valide
- mermaid.grammar_quadrant_example_bar_series_2_3_valide
Ejemplo simple
Los dos únicos elementos necesarios son el nombre del gráfico xychart y un conjunto de datos. Por lo tanto, podrás dibujar el gráfico con una configuración sencilla.
Copiar
Insertar
xychart-beta
line [+1.3, .6, 2.4, -.34]
Configuración del gráfico
| Parámetro | Descripción | Valor predeterminado |
|---|---|---|
| width | Ancho del gráfico | 700 |
| height | Altura del gráfico | 500 |
| titlePadding | Relleno interior superior e inferior del título | 10 |
| titleFontSize | El tamaño de fuente del título | 20 |
| showTitle | Si se muestra el título | true |
| xAxis | Configuración del eje x | AxisConfig |
| yAxis | Configuración del eje y | AxisConfig |
| plotReservedSpacePercent | El porcentaje mínimo de espacio que ocupa cada gráfico en el diagrama | 50 |
| showDataLabel | Si se muestra el valor correspondiente dentro del gráfico de barras | false |
AxisConfig
| Parámetro | Descripción | Valor predeterminado |
|---|---|---|
| showLabel | Si se muestran las etiquetas del eje o los valores de las marcas | true |
| labelFontSize | El tamaño de fuente de la etiqueta que se va a dibujar | 14 |
| labelPadding | El espaciado superior e inferior de la etiqueta | 5 |
| showTitle | Si se muestra el título del eje | true |
| titleFontSize | El tamaño de fuente del título del eje | 16 |
| titlePadding | El espaciado superior e inferior del título del eje | 5 |
| showTick | Si se muestran las marcas | true |
| tickLength | La longitud de las marcas | 5 |
| tickWidth | El ancho de las marcas | 2 |
| showAxisLine | Si se muestra la línea del eje | true |
| axisLineWidth | El grosor de la línea del eje | 2 |
Variables de tema del gráfico
El tema de xychart se encuentra en la propiedad xychart y puede personalizarse con la siguiente sintaxis:
Copiar
Insertar
---
config:
themeVariables:
xyChart:
titleColor: '#ff0000'
---
| Parámetro | Descripción |
|---|---|
| backgroundColor | El color de fondo de todo el gráfico |
| titleColor | El color del texto del título |
| xAxisLabelColor | El color de la etiqueta del eje x |
| xAxisTitleColor | El color del título del eje x |
| xAxisTickColor | El color de las marcas del eje x |
| xAxisLineColor | El color de la línea del eje x |
| yAxisLabelColor | El color de la etiqueta del eje y |
| yAxisTitleColor | El color del título del eje y |
| yAxisTickColor | El color de las marcas del eje y |
| yAxisLineColor | El color de la línea del eje y |
| plotColorPalette | Puede personalizarse con la siguiente sintaxis, por ejemplo "#f3456, #43445" |
Ejemplo de configuración y tema
Copiar
Insertar
---
config:
xyChart:
width: 900
height: 600
showDataLabel: true
themeVariables:
xyChart:
titleColor: "#f96"
---
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
