Angular Gráfico circular

    El Ignite UI for Angular Gráfico circular, o gráfico circular, 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 circular. Cada sección, o porción de pastel, tiene una longitud de arco proporcional a su valor de datos subyacente. Las categorías se muestran en proporción a otras categorías en función de su porcentaje de valor con respecto al valor total que se está analizando, como partes de 100 o 100%.

    Angular Pie Chart Example

    Puedes crear el Angular Gráfico circularIgxPieChartComponent en enlazando tus datos con una cadena y un valor numérico. Estos valores de datos suman un valor del 100% de la visualización. En este caso, el ejemplo muestra la distribución 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 Angular Gráfico circular 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

    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 diagrama circular es necesario crear una ElementLeyenda y asignarla a laIgxLegendComponent propiedad. LuegolegendLabelMemberPath puede usarse para especificar qué propiedad en tu modelo de datos se mostrará dentro de la leyenda para cada porción de tarta.

    Además, puedes usar laslegendItemTemplate propiedades ylegendItemBadgeTemplate y las distintas propiedades de fuente en ItemLegend para personalizar aún más el aspecto de los objetos legendarios.

    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 la muestra siguiente, seothersCategoryThreshold establece en 2 yothersCategoryType en Number. Por lo tanto, los elementos con valor menor o igual a 2 se asignarán a la categoría "Otros".

    Si se poneothersCategoryType en Porcentaje, entoncesothersCategoryThreshold se interpretará como un porcentaje en lugar de un valor, es decir, los elementos cuyos valores sean menores al 2% de la suma de todos los valores se asignarían a la categoría Otros. Puedes usar elothersCategoryType que sea más adecuado para tu aplicación.

    Angular Pie Chart Explosion

    El gráfico circular permite la explosión de porciones individuales de pastel, así como unSliceClick evento que permite modificar estados de selección e implementar lógica personalizada

    Angular Pie Chart Selection

    El gráfico circular permite seleccionar porciones mediante clic del ratón como comportamiento predeterminado. Puedes determinar las porciones seleccionadas usando laselectedItems propiedad. A continuación, se resaltan las porciones seleccionadas.

    Hay una propiedad llamadaselectionMode que es cómo configuras qué modo quieres que use el gráfico circular. El valor por defecto esSingle. Para desactivar la selección, establece la propiedad enManual.

    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 "Cambiar" son eventos cancelables, lo que significa que puedes detener la selección de una porción estableciendo la propiedadCancel de argumento del evento en true. Cuando se configura en verdadero, la propiedad asociada no se actualizará y la porción no se seleccionará. Esto es útil en situaciones en las que quieres evitar que los usuarios puedan seleccionar ciertas porciones basándose en los datos que contiene.

    En los escenarios en los que haces clic en la porción de Otros, el gráfico circular devolverá un objeto llamadoIgxPieSliceOthersContext. Este objeto contiene una lista de los elementos de datos contenidos en la sección de Otros.

    Angular Pie Chart Animation

    Puedes animar el gráfico circular de forma fluida configurando laradiusFactor propiedad, lo que escalará el radio del gráfico. También configura lastartAngle propiedad para que incline la carta de modo que siga aumentando el ángulo de la carta mientras giras.

    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