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

    The Angular Donut Chart has the ability to select slices on click. Optionally, you may apply a single custom visual style to the selected slices. The SliceClick event is raised when the user clicks on a slice. Enabling slice selection allows you to modify the slice's selection upon click. The following sample demonstrates how to enable slice selection and set the selected slice color to gray.

    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: