Diagrama XY
O gráfico XY é um módulo de gráfico abrangente que usa os eixos x e y para representar dados
Exemplo
Copiar
Incorporar
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]
Sintaxe
Todos os valores de texto que contêm apenas uma palavra podem ser escritos sem aspas duplas. Se o valor de texto contiver várias palavras, especialmente espaços, é preciso envolvê-lo entre aspas duplas.
Direção
O gráfico pode ser desenhado horizontal ou verticalmente; o padrão é vertical.
Copiar
Incorporar
xychart-beta horizontal
...
Título
O título é uma breve descrição do gráfico; ele é sempre renderizado no topo do gráfico.
Exemplo
Copiar
Incorporar
xychart-beta
title "This is a simple example"
...
Eixo x
O eixo x representa principalmente valores categóricos, embora também possa ser usado como intervalo numérico.
Exemplo
- mermaid.grammar_quadrant_example_x_axis_min_max_use
- mermaid.grammar_quadrant_example_x_axis_title_text
Eixo y
O eixo y é usado para representar intervalos numéricos; ele não pode ter valores categóricos.
Exemplo
- y-axis title min --> max
- Ele apenas adiciona o título; o intervalo é gerado automaticamente com base nos dados
Gráfico de linhas
O gráfico de linhas oferece a capacidade de exibir linhas graficamente.
Exemplo
- mermaid.grammar_quadrant_example_line_2_3_valide
- mermaid.grammar_quadrant_example_line_series_2_3_valide
Gráfico de barras
O gráfico de barras consegue exibir barras graficamente.
Exemplo
- mermaid.grammar_quadrant_example_bar_2_3_valide
- mermaid.grammar_quadrant_example_bar_series_2_3_valide
Exemplo simples
Os únicos dois elementos necessários são o nome do gráfico xychart e um conjunto de dados. Portanto, você poderá desenhar o gráfico com uma configuração simples.
Copiar
Incorporar
xychart-beta
line [+1.3, .6, 2.4, -.34]
Configuração do gráfico
| Parâmetro | Descrição | Valor padrão |
|---|---|---|
| width | Largura do gráfico | 700 |
| height | Altura do gráfico | 500 |
| titlePadding | Preenchimento superior e inferior do título | 10 |
| titleFontSize | Tamanho da fonte do título | 20 |
| showTitle | Se o título é exibido | true |
| xAxis | Configuração do eixo x | AxisConfig |
| yAxis | Configuração do eixo y | AxisConfig |
| plotReservedSpacePercent | Percentual mínimo de espaço ocupado por cada figura no gráfico | 50 |
| showDataLabel | Se deve exibir o valor correspondente dentro do gráfico de barras | false |
AxisConfig
| Parâmetro | Descrição | Valor padrão |
|---|---|---|
| showLabel | Se deve exibir o rótulo do eixo ou o valor da escala | true |
| labelFontSize | Tamanho da fonte do rótulo a ser desenhado | 14 |
| labelPadding | Espaçamento superior e inferior do rótulo | 5 |
| showTitle | Se deve exibir o título do eixo | true |
| titleFontSize | Tamanho da fonte do título do eixo | 16 |
| titlePadding | Espaçamento superior e inferior do título do eixo | 5 |
| showTick | Se deve exibir as escalas | true |
| tickLength | Comprimento da escala | 5 |
| tickWidth | Largura da escala | 2 |
| showAxisLine | Se a linha do eixo é exibida | true |
| axisLineWidth | Espessura da linha do eixo | 2 |
Variáveis de tema do gráfico
O tema do xychart fica dentro da propriedade xychart e pode ser personalizado com a seguinte sintaxe:
Copiar
Incorporar
---
config:
themeVariables:
xyChart:
titleColor: '#ff0000'
---
| Parâmetro | Descrição |
|---|---|
| backgroundColor | Cor de fundo de todo o gráfico |
| titleColor | Cor do texto do título |
| xAxisLabelColor | Cor do rótulo do eixo x |
| xAxisTitleColor | Cor do título do eixo x |
| xAxisTickColor | Cor das escalas do eixo x |
| xAxisLineColor | Cor da linha do eixo x |
| yAxisLabelColor | Cor do rótulo do eixo y |
| yAxisTitleColor | Cor do título do eixo y |
| yAxisTickColor | Cor das escalas do eixo y |
| yAxisLineColor | Cor da linha do eixo y |
| plotColorPalette | Isso pode ser personalizado com a seguinte sintaxe, por exemplo "#f3456, #43445" |
Exemplo de configuração e tema
Copiar
Incorporar
---
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]
