Pular para o conteúdo principal

Mermaid 11.15.0

Guia rápido de gráficos de pizza no Mermaid

Gráficos de pizza comparam poucas partes positivas de um total. Prefira barras para muitas categorias ou valores próximos e quadrantes para duas dimensões.

Criar com o Criador de gráficos de pizza →

Início rápido

Os valores são pesos e não precisam somar 100; Mermaid calcula as proporções.

Mermaid
Abrir no editor → 
pie showData
  title Esforço de documentação
  "Redação" : 48
  "Revisão" : 32
  "Publicação" : 20

Carregando…

Referência de sintaxe

Referência de sintaxe
SintaxeSignificado
pie / pie showDataDeclara o gráfico; showData inclui valores na legenda.
title TextAdiciona um título opcional.
"Label" : 12.75Rótulos entre aspas e pesos positivos; a precisão documentada é de duas casas decimais.
config.pie.textPosition: 0.75Posição radial: 0 é o centro e 1 a borda.
themeVariables.pieOuterStrokeWidth: "2px"Espessura da borda externa.
themeVariables.pie1…pie12Cores das fatias com theme base.
pieTitleTextSize / pieTitleTextColor / pieSectionTextSize / pieSectionTextColorVariáveis de tema para título e rótulos.
pieLegendTextSize / pieLegendTextColor / pieStrokeColor / pieStrokeWidth / pieOuterStrokeColor / pieOpacityVariáveis de tema para legenda, bordas e opacidade.
%% / accTitle: / accDescr:Comentários e descrições acessíveis.

Decimais e proporções

Use pesos positivos e ponto decimal, mesmo em idiomas que usam vírgula. showData mostra os pesos originais; os rótulos arredondam as porcentagens para números inteiros. No Mermaid 11.15, fatias menores que 1% ficam ocultas, mas continuam na legenda.

Mermaid
Abrir no editor → 
pie showData
  title Horas de edição
  "Redação" : 12.75
  "Checagem de fatos" : 6.25
  "Correção" : 3.50

Carregando…

Rótulos e legenda

Use nomes curtos. Sem showData, a legenda mostra nomes e as fatias ainda mostram proporções; evite categorias minúsculas.

Mermaid
Abrir no editor → 
pie
  title Resultados da revisão
  "Aceito" : 18
  "Revisado" : 7
  "Adiado" : 3

Carregando…

Posição do texto

textPosition é uma razão radial. Valores menores aproximam texto do centro; simplifique os dados quando houver sobreposição.

Mermaid
Abrir no editor → 
---
config:
  pie:
    textPosition: 0.6
---
pie showData
  title Divisão da revisão
  "Técnica" : 60
  "Editorial" : 40

Carregando…

Cores e borda externa

Use theme base e pie1…pie12. pieOuterStrokeWidth recebe uma medida CSS; adapte contraste e bordas ao fundo.

Mermaid
Abrir no editor → 
---
config:
  theme: base
  themeVariables:
    pie1: "#d3e5ff"
    pie2: "#50e3c2"
    pie3: "#f5f5f5"
    pieOuterStrokeWidth: "2px"
    pieSectionTextColor: "#171717"
---
pie showData
  title Distribuição do trabalho
  "Pesquisa" : 45
  "Redação" : 35
  "Revisão" : 20

Carregando…

Erros comuns

Usar peso negativo

Negativos são rejeitados; use um peso positivo e outro gráfico para perdas líquidas.

Sintaxe inválida: veja a correção abaixo

pie
  "Revisão" : -2

Usar vírgula decimal

Escreva 12.75, não 12,75; arredonde para duas casas conforme a notação documentada.

Limitações

  • Use pesos positivos para fatias visíveis. Zero é aceito, mas não desenha uma fatia; valores negativos são rejeitados.
  • São documentadas duas casas decimais nos valores originais, mas as porcentagens são arredondadas para inteiros. Fatias menores que 1% ficam ocultas.
  • Muitas categorias e valores próximos ficam mais claros em barras.

Perguntas frequentes

Os valores precisam somar 100?
Não: cada peso positivo é dividido pelo total.
O que showData muda?
Inclui valores originais na legenda sem alterar a geometria.
Como mudar as cores?
Use theme base e defina pie1…pie12 em themeVariables.