Los gráficos de pastel son gráficos estadísticos circulares utilizados para mostrar proporciones numéricas dividiendo los datos en sectores. En Mermaid.js, puedes crear desgloses de datos limpios y responsivos automáticamente sin tener que lidiar con bibliotecas de gráficos complejas ni herramientas de diseño vectorial. El motor de renderizado maneja todas las asignaciones de colores y los cálculos de porcentajes de forma dinámica.
Estructura básica de sintaxis
Cada gráfico de pastel comienza con el pastel declaración. Puedes incluir opcionalmente un título, seguido de entradas de datos donde las etiquetas de categoría van entre comillas y se emparejan con valores numéricos positivos.
pastel
título Gráfico de pastel de ejemplo
"Categoría A" : 45
"Categoría B" : 30
"Categoría C" : 25
Referencia de sintaxis
La tabla a continuación desglosa las opciones estructurales principales utilizadas para construir un mapa de gráfico de pastel en Mermaid.js.
| Componente | Descripción | Ejemplo de sintaxis |
|---|---|---|
| Declaración | Inicializa el motor de renderizado del gráfico de pastel. | pastel |
| Bandera para mostrar datos | Un modificador opcional añadido inmediatamente después de pastelpara mostrar números reales junto con los porcentajes calculados. |
pastel mostrarDatos |
| Título | Un encabezado opcional impreso claramente por encima del centro del diseño del diagrama. | título Fuentes de ingresos del Q3 |
| Etiqueta de entrada de datos | El nombre de la categoría, que siempre debe ir entre comillas dobles. | "Búsqueda orgánica" |
| Separador de datos | Un carácter dos puntos que separa su cadena de etiqueta de su valor matemático. | : |
| Valor de datos | Un número positivo. Admite conteos absolutos o pesos decimales directos hasta dos espacios decimales. | 54.25 |
Plantilla del mundo real: fuentes de tráfico del sitio web
Esta plantilla muestra una división clásica de paneles de marketing y análisis. Utiliza el parámetro showData para mostrar explícitamente las métricas de tráfico crudas directamente dentro de la leyenda, mientras que el gráfico presenta las proporciones de diseño.
pie showData titulo Canales principales de tráfico
"Búsqueda orgánica" : 3540
"Tráfico directo" : 2410
"Redes sociales" : 1850
"Sitios de referencia" : 920
"Campañas por correo electrónico" : 680
Consejo de sintaxis: Por defecto, Mermaid muestra únicamente los porcentajes calculados relativos (por ejemplo, 35%) sobre cada sección del gráfico. Al agregar la palabra clave showData inmediatamente después de pie cambia las etiquetas para mostrar tanto el porcentaje en el gráfico como los valores exactos en la lista de leyenda adjunta.
Concepto avanzado: directivas y formato
Para páginas de documentación de alta densidad, puede aplicar una directiva de configuración en línea en la parte superior de su fragmento de código para personalizar los comportamientos de estilo, cambiar los desplazamientos de colocación de texto o modificar los estilos de línea estructurales.
---
config:
pie:
textPosition: 0.6
themeVariables:
pieOuterStrokeWidth: "3px"
---
pie titulo Asignación del presupuesto operativo
"Desarrollo de productos" : 40.5
"Marketing y crecimiento" : 25.25
"Operaciones de clientes" : 20.0
"Gastos administrativos" : 14.25
Errores comunes de sintaxis
Aunque los gráficos de pastel tienen una de las sintaxis más simples en Mermaid, algunos errores de formato provocarán fallos en el análisis de diseño. Evite estos errores comunes:
- Números negativos: El motor de renderizado solo acepta valores numéricos positivos. Pasar un valor negativo o cero romperá los límites del procesamiento matemático.
- Requisitos de comillas: Las etiquetas de categoría de datos deben usar siempre comillas dobles. Las comillas simples o las comillas faltantes no permitirán una compilación correcta.
- Límites de precisión decimal: Aunque Mermaid maneja con facilidad los decimales de punto flotante con precisión, rastrea de forma nativa los parámetros hasta dos decimales. Redondear los valores antes de usarlos mantiene una consistencia estricta.
- Densidades de porciones: Para una comunicación visual clara, lo mejor es limitar tus gráficos a 6–8 porciones. Si tus conjuntos de datos tienen más elementos, agrupa los nodos más pequeños bajo una categoría de «Otros» para mantener tu diseño fácil de escanear.