Diagrama circular
O gráfico de pizza é uma figura estatística circular, dividida em vários setores para exibir proporções numéricas. Em um gráfico de pizza, o comprimento do arco de cada setor é proporcional à quantidade que ele representa.
O Mermaid pode renderizar gráficos de pizza.
Código
Copiar
Incorporar
pie title The most popular pets
"Dogs" : 386
"Cats" : 85
"Rats" : 15
Sintaxe
Desenhar um gráfico de pizza no Mermaid é muito simples.
showData indica renderizar o valor numérico real após o texto da legenda, o que é opcional.
- Em seguida vem a sintaxe title e seu valor de string, que define o título do gráfico de pizza, sendo opcional.
- Depois vêm os dados; os setores do gráfico de pizza serão organizados em sentido horário na ordem dos rótulos.
O label de uma parte do gráfico de pizza, entre aspas duplas.
Seguido de dois-pontos : como separador.
Em seguida vem um positive numeric value, que representa o valor específico, com suporte a até duas casas decimais.
mermaid.grammar_pie_data_option_title_value
Exemplo
Código
Copiar
Incorporar
---
config:
pie:
textPosition: 0.5
themeVariables:
pieOuterStrokeWidth: "5px"
---
pie showData
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
Configuração
O gráfico de pizza suporta os seguintes parâmetros de configuração:
| Parâmetro | Descrição | Valor padrão |
|---|---|---|
| textPosition | A posição axial do rótulo do setor do gráfico de pizza, de 0.0 no centro até 1.0 na borda do círculo. | 0.75 |
| donutHole | Proporção do furo do anel. Os valores válidos variam de 0 a 0.9. | 0.1 |
| legendPosition | A posição da legenda em relação ao gráfico. Os valores válidos são top, bottom, left, right e center. | top |
| highlightSlice | Destaca um setor específico com rótulo correspondente; defina como hover para destacar o setor sob o cursor. | hover |
