Os gráficos de pizza são gráficos estatísticos circulares usados para exibir proporções numéricas dividindo os dados em fatias. No Mermaid.js, você pode criar quebras de dados limpas e responsivas automaticamente, sem precisar lidar com bibliotecas de gráficos complexas ou ferramentas de design vetorial. O motor de renderização trata todas as atribuições de cores e cálculos de porcentagem dinamicamente.
Estrutura Básica de Sintaxe
Todo gráfico de pizza começa com o pie declaração. Você pode incluir opcionalmente um título, seguido por entradas de dados onde os rótulos das categorias são envolvidos por aspas e associados a valores numéricos positivos.
pie
titulo Gráfico de Pizza Amostra
"Categoria A" : 45
"Categoria B" : 30
"Categoria C" : 25
Referência de Sintaxe
A tabela abaixo detalha as opções estruturais principais usadas para construir um mapa de gráfico de pizza no Mermaid.js.
| Componente | Descrição | Exemplo de Sintaxe |
|---|---|---|
| Declaração | Inicializa o motor de renderização do gráfico de pizza. | pie |
| Sinalizador de Exibição de Dados | Um modificador opcional adicionado imediatamente após piepara exibir números reais juntamente com as porcentagens calculadas. |
pie showData |
| Título | Um título opcional impresso claramente acima do centro do layout do diagrama. | titulo Fontes de Receita do Q3 |
| Rótulo da Entrada de Dados | O nome da categoria, que deve sempre estar entre aspas duplas. | "Pesquisa Orgânica" |
| Separador de Dados | Um caractere dois-pontos que separa sua string de rótulo do seu valor matemático. | : |
| Valor de Dados | Um número positivo. Suporta contagens absolutas ou pesos decimais diretos com até duas casas decimais. | 54.25 |
Modelo do Mundo Real: Fontes de Tráfego do Site
Este modelo demonstra uma análise clássica de painel de marketing e análise. Ele usa o parâmetro showData para exibir explicitamente as métricas brutas de tráfego diretamente na legenda, enquanto o gráfico apresenta as proporções de layout.
pie showData title Canais Principais de Tráfego
"Busca Orgânica" : 3540
"Tráfego Direto" : 2410
"Mídias Sociais" : 1850
"Sites de Referência" : 920
"Campanhas por E-mail" : 680
Dica de Sintaxe: Por padrão, o Mermaid exibe apenas os percentuais calculados relativos (por exemplo, 35%) sobre cada seção do gráfico. Adicionar a palavra-chave showData imediatamente após pie altera as etiquetas para exibir tanto o percentual no gráfico quanto os valores brutos exatos na lista de legenda associada.
Conceito Avançado: Diretivas e Formatação
Para páginas de documentação de alta densidade, você pode aplicar uma diretiva de configuração embutida no topo de seu trecho de código para personalizar comportamentos de estilo, alterar deslocamentos de posicionamento de texto ou modificar estilos de linhas estruturais.
---
config:
pie:
textPosition: 0.6
themeVariables:
pieOuterStrokeWidth: "3px"
---
pie title Alocação Orçamentária Operacional
"Desenvolvimento de Produto" : 40.5
"Marketing e Crescimento" : 25.25
"Operações com Clientes" : 20.0
"Custos Administrativos" : 14.25
Armadilhas Comuns de Sintaxe
Embora os gráficos de pizza tenham uma das sintaxes mais simples no Mermaid, alguns erros de formatação causarão falhas na análise de layout. Evite esses erros comuns:
- Números Negativos: O motor de renderização aceita apenas valores numéricos positivos. Passar um valor negativo ou zero quebrará os limites de processamento matemático.
- Requisitos de Aspas: As etiquetas de categoria de dados devem sempre usar aspas duplas. Aspas simples ou aspas ausentes farão com que a construção falhe.
- Limites de Precisão Decimal: Embora o Mermaid manipule decimais de ponto flutuante com precisão de forma suave, ele rastreia nativamente parâmetros até duas casas decimais. Arredondar os valores antes mantém uma consistência estrita.
- Densidades de Fatias: Para uma comunicação visual clara, é melhor prática limitar seus gráficos a 6 a 8 fatias. Se seus conjuntos de dados tiverem mais elementos, agrupe os nós menores juntos sob uma categoria ‘Outros’ para manter seu design facilmente legível.