Angular Gráfico de anillos
La Ignite UI for Angular Gráfico de anillos es similar al Gráfico circular, que ilustra proporcionalmente las apariciones de una variable. El gráfico de anillos puede mostrar múltiples variables en anillos concéntricos y proporciona soporte integrado para visualizar datos jerárquicos. Los anillos pueden vincularse a un elemento de datos diferente o pueden compartir una fuente de datos común.
Angular Donut Chart Example
Puede crear Gráfico de anillos utilizando el control IgxDoughnutChartComponent
vinculando sus datos como se muestra en el siguiente ejemplo.
Angular Donut Chart Recommendations
Are Angular Donut Charts right for your project?
Los gráficos de anillos son apropiados para conjuntos de datos pequeños y fáciles de leer de un vistazo. Los gráficos de anillos son sólo un tipo de visualización de parte a todo. Otros incluyen:
- Área apilada
- Área apilada al 100 % (área porcentual apilada)
- Barra apilada
- Barra apilada al 100% (barra de porcentaje apilada)
- Gráfico de rectángulos
- Cascada
El Gráfico de anillos Angular incluye funciones interactivas que brindan al espectador herramientas para analizar datos, como:
- Leyendas
- Explosión de rebanadas
- Selección de rebanadas
- Animaciones de gráficos
Best Practices for Donut Charts
- Usar múltiples conjuntos de datos para mostrar sus datos en una pantalla de anillo.
- Colocar información, como valores o etiquetas, dentro del orificio del donut para una explicación rápida de los datos.
- Comparar porciones o segmentos como valores porcentuales en proporción a un valor total o entero.
- Mostrando cómo un grupo de categorías se divide en segmentos más pequeños.
- Garantizar que los segmentos de datos sumen el 100%.
- Garantizar que la paleta de colores sea distinguible para segmentos/rebanadas de las piezas.
When not to use a Donut Chart
- Comparación de cambios a lo largo del tiempo: utilice un gráfico de barras, líneas o áreas.
- Requiere una comparación de datos precisa: utilice un gráfico de barras, líneas o áreas.
- Tiene más de 6 u 8 segmentos (alto volumen de datos); considere un gráfico de barras, líneas o áreas si funciona para su historia de datos.
- Sería más fácil para el espectador percibir la diferencia de valores en un gráfico de barras.
- Tienes datos negativos, ya que esto no se puede representar en un gráfico de anillos.
Angular Donut Chart - Slice Selection
El Gráfico de anillos Angular tiene la capacidad de seleccionar sectores al hacer clic. Opcionalmente, puede aplicar un único estilo visual personalizado a los sectores seleccionados. El evento SliceClick
se genera cuando el usuario hace clic en un sector. Habilitar la selección de sectores le permite modificar la selección del sector al hacer clic. El siguiente ejemplo demuestra cómo habilitar la selección de sectores y establecer el color del sector seleccionado en gris.
Angular Donut Chart - Multiple Rings
Es posible tener una visualización de múltiples anillos en el Angular Gráfico de anillos, donde cada uno de los anillos puede vincularse a un elemento de datos diferente, o pueden compartir una fuente de datos común. Esto puede resultar útil si necesita mostrar sus datos como niveles que tienen una categoría común subyacente, como los datos de temporada a mes que se muestran a continuación:
Additional Resources
Puede encontrar más información sobre tipos de gráficos relacionados en estos temas:
API References
La siguiente tabla enumera los miembros de API mencionados en las secciones anteriores: