Diagrama circular
El gráfico circular es una figura estadística de forma circular que se divide en varios sectores para mostrar proporciones numéricas. En el gráfico circular, la longitud del arco de cada sector es proporcional a la cantidad que representa.
Mermaid puede renderizar gráficos circulares.
Código
Copiar
Insertar
pie title The most popular pets
"Dogs" : 386
"Cats" : 85
"Rats" : 15
Sintaxis
Dibujar un gráfico circular en Mermaid es muy sencillo.
showData indica que el valor real se renderiza después del texto de la leyenda, y es opcional.
- A continuación van la sintaxis title y su valor de cadena, que establecen el título del gráfico circular, y es opcional.
- Después vienen los conjuntos de datos; los sectores del gráfico circular se ordenan en sentido horario según el orden de las etiquetas.
La label de una parte del gráfico circular, encerrada entre comillas dobles.
Seguida de dos puntos : como separador.
Después va un positive numeric value, que representa el valor concreto y admite hasta dos decimales.
mermaid.grammar_pie_data_option_title_value
Ejemplo
Código
Copiar
Insertar
---
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
Configuración
El gráfico circular admite los siguientes parámetros de configuración:
| Parámetro | Descripción | Valor predeterminado |
|---|---|---|
| textPosition | La posición axial de las etiquetas de los sectores del gráfico circular, desde 0.0 en el centro hasta 1.0 en el borde del círculo. | 0.75 |
| donutHole | La proporción del hueco anular. El rango de valores válidos va de 0 a 0.9. | 0.1 |
| legendPosition | La posición de la leyenda respecto al gráfico. Los valores válidos son top, bottom, left, right y center. | top |
| highlightSlice | Resalta un sector concreto con una etiqueta coincidente; si se establece en hover, se resalta el sector sobre el que se pasa el ratón. | hover |
