Angular Gráfico de anillos

    El Ignite UI for Angular Gráfico de anillos es similar al Gráfico circular, ilustrando proporcionalmente las ocurrencias de una variable. El gráfico de anillos puede mostrar varias variables en anillos concéntricos y proporciona compatibilidad integrada para visualizar datos jerárquicos. Los anillos se pueden enlazar a un elemento de datos diferente o pueden compartir una fuente de datos común.

    Angular Donut Chart Example

    Puedes crear Gráfico de anillos usando elIgxDoughnutChartComponent control vinculando tus datos como se muestra en el ejemplo siguiente.

    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:

    El Angular Gráfico de anillos incluye funciones interactivas que proporcionan 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 Angular Gráfico de anillos tiene la capacidad de seleccionar cortes al hacer clic. Opcionalmente, puedes aplicar un único estilo visual personalizado a las porciones seleccionadas. ElSliceClick evento se activa cuando el usuario hace clic en una porción. Activar la selección de porciones te permite modificar la selección de la porción al hacer clic. El siguiente ejemplo demuestra cómo habilitar la selección de cortes y establecer el color seleccionado en gris.

    Angular Donut Chart - Multiple Rings

    Es posible tener una pantalla de varios anillos en el Angular Gráfico de anillos, con cada uno de los anillos capaz de vincularse a un elemento de datos diferente, o pueden compartir una fuente de datos común. Esto puede ser útil si necesita mostrar los 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: