Angular Gráfico circular

    La Ignite UI for Angular Gráfico circular, o Pie Graph, es un gráfico de parte a todo que muestra cómo las categorías (partes) de un conjunto de datos se suman a un valor total (entero). Las categorías se representan como secciones en un gráfico circular o en forma de pastel. Cada sección, o sector circular, tiene una longitud de arco proporcional a su valor de datos subyacente. Las categorías se muestran en proporción a otras categorías según su porcentaje de valor con respecto al valor total que se analiza, como partes de 100 o 100%.

    Angular Pie Chart Example

    Puede crear el Gráfico circular Angular en IgxPieChartComponent vinculando sus elementos de datos con una cadena y un valor de datos numérico. Estos valores de datos sumarán un valor del 100% de la visualización. En este caso, el ejemplo muestra el desglose general del gasto presupuestario por departamento.

    Angular Pie Chart Recommendations

    Los gráficos circulares son apropiados para conjuntos de datos pequeños y fáciles de leer de un vistazo. Los gráficos circulares son sólo un tipo de visualización de parte a todo. Otros incluyen:

    • Tarta
    • Donut (anillo)
    • Embudo
    • Área apilada
    • Área apilada al 100 % (área porcentual apilada)
    • Barra apilada
    • Barra apilada al 100% (barra de porcentaje apilada)
    • Mapa de árbol
    • Cascada

    El Gráfico circular 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

    Mejores prácticas para un Gráfico circular:

    • 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.
    • Presentar conjuntos de datos pequeños y no jerárquicos (menos de 6 a 8 segmentos de datos).
    • Garantizar que los segmentos de datos sumen el 100%.
    • Organizar el orden de los datos de mayor (mayor) a menor (menor).
    • Utilizar técnicas de presentación estándar, como comenzar en la posición de las 12 en punto y continuar en el sentido de las agujas del reloj.
    • Garantizar que la paleta de colores sea distinguible para segmentos/rebanadas de las piezas.
    • Considerar etiquetas de datos en segmentos versus leyendas para facilitar la lectura.
    • Elegir un gráfico alternativo al circular, como barras o anillos, según su facilidad de comprensión.
    • Evitar colocar varios gráficos circulares uno al lado del otro para realizar análisis comparativos.

    No utilice Gráfico circular cuando:

    • 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.

    Angular Pie Chart Legend

    Las leyendas se utilizan para mostrar información sobre cada punto, para conocer su contribución a la suma total. Puede contraer el punto haciendo clic en la leyenda.

    Para mostrar una leyenda junto al gráfico circular, es necesario crear una ItemLegend y asignarla a la propiedad IgxLegendComponent. Luego, legendLabelMemberPath se puede usar para especificar qué propiedad en su modelo de datos usará para mostrar dentro de la leyenda para cada sector circular.

    Además, puede utilizar las propiedades legendItemTemplate y legendItemBadgeTemplate y las diversas propiedades de fuente en ItemLegend para personalizar aún más el aspecto de los elementos de leyenda.

    Angular Pie Chart Others Category

    A veces, los datos subyacentes del gráfico circular contendrán muchos elementos con valores pequeños. En este caso, la categoría Otros permitirá la agregación automática de varios valores de datos en un solo segmento.

    En el siguiente ejemplo, othersCategoryThreshold se establece en 2 y othersCategoryType se establece en Number. Por lo tanto, los artículos con valor menor o igual a 2 serán asignados a la categoría "Otros".

    Si establece othersCategoryType en Porcentaje, othersCategoryThreshold se interpretará como un porcentaje en lugar de un valor, es decir, los elementos cuyos valores sean inferiores al 2% de la suma de todos los valores de los elementos se asignarán a la categoría Otros. Puede utilizar cualquier othersCategoryType que sea más apropiado para su aplicación.

    Angular Pie Chart Explosion

    El gráfico circular admite la explosión de porciones circulares individuales, así como un evento SliceClick que le permite modificar los estados de selección e implementar una lógica personalizada.

    Angular Pie Chart Selection

    El gráfico circular admite la selección de sectores mediante un clic del mouse como comportamiento predeterminado. Puede determinar los sectores seleccionados utilizando la propiedad selectedItems. A continuación, se resaltan los sectores seleccionados.

    Hay una propiedad llamada selectionMode que es la forma de establecer el modo que desea que utilice el gráfico circular. El valor predeterminado es Single. Para deshabilitar la selección, establezca la propiedad en Manual.

    El gráfico circular admite tres modos de selección diferentes.

    • Único: cuando el modo está configurado en único, solo se puede seleccionar un segmento a la vez. Cuando seleccione un nuevo sector, el sector seleccionado previamente se deseleccionará y el nuevo quedará seleccionado.
    • Múltiple: cuando el modo está configurado en Múltiple, se pueden seleccionar muchos sectores a la vez. Si hace clic en un sector, se seleccionará y al hacer clic en un sector diferente también se seleccionará ese sector, dejando el sector anterior seleccionado.
    • Manual: cuando el modo está configurado en Manual, la selección está desactivada.

    El gráfico circular tiene 4 eventos asociados con la selección:

    • Elemento seleccionadoCambiando
    • Artículo seleccionadoCambiado
    • Elementos seleccionadosCambiando
    • Artículos seleccionados cambiados

    Los eventos que terminan en "Cambiando" son eventos cancelables, lo que significa que puede detener la selección de un segmento estableciendo la propiedad del argumento del evento Cancel en verdadero. Cuando se establece en verdadero, la propiedad asociada no se actualizará y el sector no se seleccionará. Esto es útil para escenarios en los que desea evitar que los usuarios puedan seleccionar ciertos sectores en función de los datos que contiene.

    Para escenarios en los que hace clic en el segmento Otros, el gráfico circular devolverá un objeto llamado IgxPieSliceOthersContext. Este objeto contiene una lista de los elementos de datos contenidos en el segmento Otros.

    Angular Pie Chart Animation

    Puede animar el gráfico circular sin problemas configurando la propiedad radiusFactor, que escalará el radio del gráfico. También configure la propiedad startAngle para inclinar el gráfico de modo que siga aumentando el ángulo del gráfico mientras gira.

    En el código siguiente, radioFactor aumenta el gráfico en un 0,25% del tamaño y startAngle gira el gráfico 1 grado. Cuando radioFactor y startAngle alcanzan su límite máximo, la animación se detiene restableciendo el indicador de animación y borrando el intervalo.

    Angular Pie Chart Styling

    Una vez creado nuestro gráfico circular, es posible que deseemos realizar algunas personalizaciones de estilo adicionales, como un cambio de colores para las porciones del gráfico, como se muestra a continuación:

    Angular Radial Pie Chart

    El Gráfico circular radial pertenece a un grupo de gráficos radiales y utiliza sectores circulares que se extienden desde el centro del gráfico hacia las ubicaciones de los puntos de datos. Este tipo de gráfico toma conceptos de categorización de múltiples series de puntos de datos y los envuelve alrededor de un eje circular en lugar de estirar los puntos de datos a lo largo de una línea horizontal.

    Additional Resources

    API References

    La siguiente tabla enumera los miembros de API mencionados en las secciones anteriores:

    Tipo de gráfico Nombre del control Miembros de la API
    Gráfico circular IgxPieChartComponent PieChart
    Gráfico circular radial IgxDataChartComponent IgxRadialPieSeriesComponent