Um Gráfico XY é um componente abrangente de visualização de dados usado para renderizar gráficos de linhas e gráficos de barras em um layout padrão de grade coordenada bidimensional. Introduzido para substituir e consolidar esquemas de gráficos antigos e independentes, o xychart-betamotor de renderização processa dinamicamente conjuntos de dados numéricos personalizados, escala automaticamente grades estruturais responsivas e suporta a exibição de múltiplas séries de dados independentes e sobrepostas ao mesmo tempo.
Estrutura Básica de Sintaxe
Todo Gráfico XY começa com o xychart-betacabeçalho de declaração. É seguido pela configuração de uma matriz de categorias do eixo X horizontal, um título do eixo Y vertical ou limite de faixa de dados, e pelo menos uma série explícita de plotagem de dados (como um bloco de linha ou barra bloco).
xychart-beta
título "Gráfico de Desempenho de Exemplo"
eixo-x [Jan, Fev, Mar, Abr]
eixo-y "Receita (USD)"
barra [4500, 5200, 6100, 5800]
Referência de Sintaxe
A tabela abaixo detalha as definições de dados principais e chaves de configuração necessárias para estruturar corretamente um Gráfico XY no Mermaid.js.
| Componente de Sintaxe | Formatos Aceitos | Descrição e Regras de Uso |
|---|---|---|
| Declaração | Palavra-chave | Inicializa o espaço de trabalho do gráfico com layout bidimensional. Deve usar exatamente o bloco de string xychart-beta bloco de string. |
| Título | String entre aspas | Um título global opcional exibido centralizado imediatamente acima da grade da tela do gráfico. |
| Configuração do Eixo X | Lista entre colchetes / Faixa | Define rótulos da escala horizontal. Aceita strings de texto categórico entre colchetes[A, B, C] ou faixas de pontos numéricos [100 --> 500]. |
| Configuração do Eixo Y | String do Título / Limites da Escala | Configura os parâmetros da escala vertical. Pode ser simplesmente uma string de título do eixo, ou personalizada para limitar os intervalos de valores inferior/superior usando"Título" 0 --> 100. |
| Série de Gráficos de Barras | Array Numérico | Renderiza conjuntos de dados como barras verticais. A quantidade de elementos dentro do array de dados deve corresponder exatamente ao comprimento das categorias do eixo X. |
| Série de Gráficos de Linha | Array Numérico | Renderiza conjuntos de dados como linhas contínuas que conectam pontos de dados ao longo da área de trabalho da grade. |
Personalização Avançada de Dados (Diretivas)
Você pode ajustar com precisão a aparência visual do seu espaço de trabalho do gráfico incorporando um bloco de configuração de frontmatter na parte superior absoluta do trecho de código do seu documento. Isso lhe dá controle total sobre o layout, incluindo cores hex personalizadas, espessuras de linhas das séries de plotagem e campos de visibilidade da grade.
Matriz de Atributos de Configuração do Gráfico XY
| Chave de Configuração da Propriedade | Opções de Valor | Resultado Visual |
|---|---|---|
showLine |
verdadeiro | falso |
Ativa ou desativa se os traços da grade estrutural do eixo de fundo são exibidos em coordenadas. |
chartWidth |
Inteiro (Pixels) | Define a largura fixa de layout de canvas delimitado do sistema de grade. |
alturaDoGráfico |
Inteiro (Pixels) | Define uma altura fixa de layout de canvas delimitado do sistema de grade. |
variaveisDoTema.xyChart |
Arrays de Mapeamento de Cores | Insere blocos de cor explícitos em hex (por exemplo, corDeFundo, corDoTítulo, ou slots de lista de cores personalizadas paletaDeCoresDoGráfico) em seus gráficos. |
Plano Real: Comparação Técnica Multisserie
Este plano abrangente rastreia uma revisão de desempenho de infraestrutura. Utiliza uma diretiva de configuração personalizada para fixar os tamanhos das dimensões do canvas, exibir os caminhos das linhas de grade de fundo e injetar uma paleta de cores hexadecimais explícita. Mapeia quatro fases trimestrais distintas, representando-as como um gráfico combinado visual (gráficos de barras e linhas sobrepostos juntos).
---
config:
xychart:
larguraDoGráfico: 700
alturaDoGráfico: 400
mostrarLinha: true
variaveisDoTema:
xychart:
corDoTítulo: "#0072B1"
paletaDeCoresDoGráfico: "#0072B1, #E06000"
---
xychart-beta
título "Métricas de Recursos vs Execução Q1-Q4"
eixo-x ["Trimestre 1", "Trimestre 2", "Trimestre 3", "Trimestre 4"]
eixo-y "Unidades de Métrica de Desempenho" 0 --> 100
barra [45, 65, 80, 95]
linha [55, 60, 72, 88]
Dica de Sintaxe: Ao sobrepor múltiplos gráficos de dados (como executar um barra conjunto de dados e um linha conjunto de dados dentro do mesmo canvas de layout), o motor de renderização empilhará ou desenhará eles sequencialmente na ordem em que são escritos no script de texto. Organize seus blocos de dados intencionalmente para evitar cortes visuais nas linhas do canvas.
Armadilhas Comuns de Sintaxe e Restrições do Sistema
Ao compilar caminhos de matriz dimensional, alguns pequenos erros de configuração sutil irão interromper os cálculos de coordenadas. Mantenha esses parâmetros de solução de problemas em mente:
- Descompasso de Comprimento de Dados: Cada
barraoulinhaa matriz de séries de dados *deve* conter exatamente o mesmo número de entradas definidas no seueixo xparâmetro de lista. Ter 4 categorias no seu eixo X, mas fornecer uma lista de dados com 5 números, irá quebrar completamente a compilação do gráfico. - Limites de aspas: Ao especificar categorias dentro dos colchetes de uma lista de eixos, blocos de texto que contenham espaços ou caracteres especiais de pontuação devem ser cercados limpidamente por aspas duplas (por exemplo,
["Fase 1", "Fase 2"]). - Limites de coordenadas numéricas: Ao definir intervalos manuais na escala de um eixo (como
0 --> 500), você deve usar explicitamente dois traços seguidos por um símbolo de maior que (-->). Esquecer um traço ou separar os caracteres do operador com espaços acionará um erro de processamento de layout. - Pesos inteiros positivos: Os valores de escala mapeiam para blocos de espaço linear. Certifique-se de que os valores passados para suas séries não contenham elementos de caracteres não escapados ou vazios nulos de parâmetros dentro de arrays.