Web Components Gráfico de anillos

    El Gráfico de anillos Ignite UI for Web Components es similar al Gráfico circular e 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.

    Web Components Donut Chart Example

    Puede crear Gráfico de anillos utilizando el control IgcDoughnutChartComponent vinculando sus datos como se muestra en el siguiente ejemplo.

    Web Components Donut Chart Recommendations

    Are Web Components 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 Web Components 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.

    Web Components Donut Chart - Slice Selection

    El Gráfico de anillos Web Components 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.

    Web Components Donut Chart - Multiple Rings

    Es posible tener una visualización de anillos múltiples en el Gráfico de anillos Web Components, donde cada uno de los anillos se puede vincular 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: