Web Components Gráfico circular de datos

    El Gráfico circular de datos Ignite UI for Web Components 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 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 en función de su porcentaje de valor con respecto al valor total que se está analizando, como partes de 100 o 100%.

    Web Components Data Pie Chart Example

    Puede crear el Web Components Gráfico circular en el enlazando los XamDataPieChart elementos de datos con una cadena y un valor de datos numéricos. Estos valores de datos se sumarán a un valor del 100% de la visualización.

    Web Components Data 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:

    • 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 de datos Web Components incluye funciones interactivas que proporcionan al espectador herramientas para analizar datos, como:

    • Leyendas
    • Selección de rebanadas
    • Slice Highlighting
    • 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.

    Web Components Data Pie Chart Legend

    Las leyendas se utilizan para mostrar información sobre cada punto, para conocer su contribución a la suma total.

    Para mostrar una leyenda junto al gráfico circular, es necesario crear un ItemLegend y asignarlo a la IgcLegendComponent propiedad. ItemLegend mostrará sus elementos en orientación vertical de forma predeterminada, pero esto se puede cambiar estableciendo su orientation propiedad.

    Las etiquetas que se muestran en la leyenda mostrarán el mismo contenido que la etiqueta que se muestra para cada sector en el XamDataPieChart de forma predeterminada, pero esto se puede modificar utilizando la LegendSliceLabelContentMode propiedad en el gráfico. Esto expone una enumeración que le permite mostrar la etiqueta, el valor, el porcentaje o cualquier combinación de ellos como el contenido de la leyenda para cada sector del gráfico.

    También puede modificar el distintivo ItemLegend. De forma predeterminada, aparece como un círculo relleno que corresponde al color del sector del gráfico asociado. Puede configurarlo mediante la propiedad del legendItemBadgeShape gráfico, y puede establecerlo para que sea un círculo, una línea, una barra, una columna, etc.

    A continuación se muestra un ejemplo que muestra el uso de ItemLegend con el XamDataPieChart archivo .

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

    La categoría Otros de la XamDataPieChart categoría tiene tres propiedades principales y configurables -OthersCategoryType, OthersCategoryThreshold, y OthersCategoryText que le permiten configurar cómo se muestra el sector Otros en el gráfico. Cada uno de ellos se describe a continuación:

    La OthersCategoryType propiedad funciona en conjunto con la OthersCategoryThreshold propiedad del XamDataPieChart. Para el OthersCategoryType, puede definir si desea que se OthersCategoryThreshold evalúe como un número o un porcentaje. Por ejemplo, si decide el número y lo establece OthersCategoryThreshold en 5, los segmentos que tengan un valor inferior a 5 pasarán a formar parte de la categoría Otros. Con el mismo valor de 5 con un tipo de porcentaje, los valores que sean inferiores al 5 por ciento de los valores totales del XamDataPieChart pasarán a formar parte de la categoría Otros.

    De forma predeterminada, el segmento Otros se representará mediante la etiqueta "Otros". Puede cambiar esto modificando la OthersCategoryText propiedad del gráfico.

    Si desea asegurarse de que la categoría Otros no aparezca en el XamDataPieChart, puede establecer el OthersCategoryThreshold en 0.

    En el ejemplo siguiente se muestra el uso del segmento Otros en el XamDataPieChart:

    Web Components Data Pie Chart Selection

    El XamDataPieChart soporte permite la selección de rebanadas mediante un clic del ratón sobre las rebanadas trazadas en el gráfico. Esto se puede configurar utilizando las SelectionBehavior propiedades y SelectionMode del gráfico, que se describen a continuación:

    Las dos opciones principales de la son PerDataItemSingleSelect y PerDataItemMultiSelect, que permitirá la SelectionBehavior selección simple y múltiple, respectivamente.

    La SelectionMode propiedad expone una enumeración que determina cómo responden los segmentos del gráfico circular a la selección. A continuación se muestran las opciones de esa enumeración y lo que hacen:

    • Brighten: Se resaltarán los sectores seleccionados.
    • FadeOthers: Las porciones seleccionadas permanecerán en su mismo color y otras se desvanecerán.
    • FocusColorFill: Los sectores seleccionados cambiarán su fondo al FocusBrush del gráfico.
    • FocusColorOutline: Los sectores seleccionados tendrán un contorno con el color definido por el FocusBrush del gráfico.
    • FocusColorThickOutline: Los sectores seleccionados tendrán un contorno con el color definido por el FocusBrush del gráfico. El grosor de este contorno también se puede configurar a través de la propiedad Thickness del control.
    • GrayscaleOthers: A las divisiones no seleccionadas se les aplicará un filtro de color gris.
    • None: No hay ningún efecto en las porciones seleccionadas.
    • SelectionColorFill: Los sectores seleccionados cambiarán su fondo al SelectionBrush del gráfico.
    • SelectionColorOutline: Los sectores seleccionados tendrán un contorno con el color definido por el SelectionBrush del gráfico.
    • SelectionColorThickOutline: Los sectores seleccionados tendrán un contorno con el color definido por el FocusBrush del gráfico. El grosor de este contorno también se puede configurar a través de la propiedad Thickness del control.
    • ThickOutline: Las divisiones seleccionadas aplicarán un contorno cuyo grosor dependerá de la propiedad Grosor del gráfico.

    Cuando se selecciona un segmento, su elemento de datos subyacente se agregará a la colección SelectedSeriesItems del gráfico. Por lo tanto, XamDataPieChart expone el evento SelectedSeriesItemsChanged para detectar cuándo se ha seleccionado un segmento y se ha cambiado esta colección.

    En el ejemplo siguiente se muestra la característica de selección del XamDataPieChart control:

    Web Components Data Pie Chart Highlighting

    Admite XamDataPieChart el resaltado con el mouse, así como una superposición de resaltado que se puede configurar proporcionando una fuente de datos separada.

    En primer lugar, la highlightingBehavior propiedad enumerada determina cómo se resaltará un segmento. Las siguientes son las opciones de esa propiedad y lo que hacen:

    • DirectlyOver: Los sectores solo se resaltan cuando el ratón está directamente sobre ellos.
    • NearestItems: Se resaltará el sector más cercano a la posición del ratón.
    • NearestItemsAndSeries: Se resaltarán el sector y la serie más cercanos a la posición del ratón.
    • NearestItemsRetainMainShapes: Los elementos más cercanos a la posición del ratón se resaltarán y las formas principales de la serie no se desenfatizarán.

    La highlightingMode propiedad enumerada determina cómo responden los segmentos del gráfico circular de datos a la resaltación. Las siguientes son las opciones de esa propiedad y lo que hacen:

    • Brighten: El color de la serie se iluminará cuando la posición del ratón esté por encima o cerca de ella.
    • BrightenSpecific: El color del corte específico se iluminará cuando la posición del mouse esté sobre o cerca de él.
    • FadeOthers: La serie conservará su color cuando la posición del ratón esté por encima o cerca de ella, mientras que las demás aparecerán descoloridas.
    • FadeOthersSpecific: El sector específico conservará su color cuando la posición del ratón esté sobre él o cerca de él, mientras que los demás aparecerán difuminados.
    • None: Las series y los sectores no se resaltarán.

    En el ejemplo siguiente se muestran los comportamientos de resaltado del mouse del XamDataPieChart componente:

    Además del resaltado del mouse, expone XamDataPieChart una capacidad de filtro de resaltado que puede mostrar un subconjunto de sus datos. Esto se aplica especificando a HighlightedDataSource para el control y estableciendo la highlightedValuesDisplayMode propiedad en Overlay. El HighlightedDataSource espera un subconjunto de los datos asignados a la DataSource propiedad de la XamDataPieChart.

    Cuando se cumplen estas condiciones, los valores del subconjunto se resaltarán, mientras que el resto del conjunto completo de datos se desvanecerá, lo que crea efectivamente un resaltado para el subconjunto y permite una visualización más fácil de un subconjunto de sus datos dentro del mismo control.

    Web Components Data Pie Chart Animation

    Admite XamDataPieChart la animación de sus sectores a la vista, así como cuando cambia un valor.

    Puede establecer la IsTransitionInEnabled propiedad en true para que el gráfico circular se anime a la vista. El tipo de animación realizada se puede configurar estableciendo la TransitionInMode propiedad enumerada en el tipo de animación que desea ver. Además, también puede establecer la TransitionInSpeedType propiedad para que se escale con índice, valor, normal o aleatorio. La duración de esta animación puede ser controlada por la TransitionInDuration propiedad, que toma un TimeSpan.

    Si desea animar los cambios de datos, también puede hacerlo estableciendo la animateSeriesWhenAxisRangeChanges propiedad en true. La duración de este cambio también se puede configurar estableciendo la TransitionDuration propiedad.

    En el ejemplo siguiente se muestra el uso de la animación en: XamDataPieChart​

    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
    Datos Gráfico circular XamDataPieChart XamDataPieChart
    Item Legend IgcItemLegendComponent IgcItemLegendComponent