El gráfico circular o gráfico de torta es una herramienta de visualización de tipo "parte a todo", que ilustra cómo las categorías individuales de un conjunto de datos se suman para formar un valor total. En el desarrollo de aplicaciones web con Angular, la implementación de estos componentes permite representar de manera intuitiva proporciones y contribuciones relativas.
Implementación con Ignite UI for Angular
Para integrar esta funcionalidad, se utiliza el componente IgxPieChartComponent. Este elemento permite enlazar datos mediante una cadena y un valor numérico, donde cada sección representa una porción con una longitud de arco proporcional a su valor subyacente.
Configuración y visualización
- Leyendas: Para mostrar información sobre cada punto y su contribución al total, es necesario crear una ElementLeyenda y asignarla a la propiedad IgxLegendComponent.
- Gestión de datos pequeños: Cuando los datos contienen múltiples elementos con valores reducidos, se puede utilizar la propiedad othersCategoryThreshold. Al configurar othersCategoryType como "Porcentaje", cualquier elemento menor a un umbral definido se agrupará automáticamente en la categoría "Otros".
Interacción y selección
El gráfico circular permite la selección de porciones mediante clics. El comportamiento se controla a través de las siguientes propiedades:
- selectionMode: Puede configurarse como Single (único segmento a la vez) o Multiple (varios sectores simultáneamente).
- Control de eventos: Los eventos que terminan en "Cambiar" son cancelables. Esto permite detener la selección de una porción estableciendo la propiedad Cancel en true.
Personalización y animaciones
La apariencia del gráfico puede ajustarse para mejorar la experiencia del usuario y la claridad visual:
| Propiedad | Descripción |
|---|---|
| radiusFactor | Escala el radio del gráfico para crear animaciones fluidas. |
| startAngle | Permite rotar el gráfico para ajustar el ángulo inicial de las porciones. |
COMO HACER UNA GRAFICA CIRCULAR Super facil - Para principiantes
Consideraciones sobre gráficos de pastel y dona
Tanto las gráficas de pastel como las de dona cumplen la misma función analítica. La elección entre una u otra depende principalmente de las preferencias de diseño:
- Gráficas de pastel: Son útiles cuando se desea comparar un parámetro específico o un conjunto de datos donde la participación de cada entidad es relevante.
- Gráficas de dona: Son una variante del gráfico de pastel que presenta los datos en forma de anillo, dejando el centro vacío.
Nota: En cualquier implementación de este tipo, es fundamental recordar que las entidades cuya participación sea cero no deben mostrarse en la gráfica, ya que el objetivo principal es facilitar la interpretación de la información a primera vista.