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:

    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: