Blazor Data Pie Chart

    El Gráfico circular de datos Ignite UI for Blazor es un gráfico de partes a todo que muestra cómo las categorías (partes) de un conjunto de datos se suman para formar un valor total (todo). Las categorías se representan como secciones en un gráfico circular o de tarta. Cada sección, o porción de tarta, 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 analiza, como partes de 100 o 100 %.

    Blazor Data Pie Chart Example

    Puedes crear el Blazor Gráfico circularIgbDataPieChart 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.

    Blazor Data Pie Chart Recommendations

    Los gráficos circulares son apropiados para conjuntos de datos pequeños y son fáciles de leer de un vistazo. Los gráficos circulares son solo un tipo de visualización de parte a totalidad, como el gráfico de anillos, el Gráfico de embudo, el Gráfico de áreas apilado, el Gráfico de barras apilado y el mapa de rectángulos.

    El Gráfico circular de datos Blazor incluye funciones interactivas que brindan 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.

    Blazor 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 diagrama circular es necesario crear una ElementLeyenda y asignarla a laLegend propiedad. El ItemLegend mostrará sus elementos en orientación vertical por defecto, pero esto se puede cambiar configurando suOrientation propiedad.

    Las etiquetas que aparecen en la leyenda mostrarán el mismo contenido que la etiqueta que aparece para cada porción en elIgbDataPieChart por defecto, pero esto puede modificarse utilizando laLegendSliceLabelContentMode propiedad del gráfico. Esto expone una enumeración que permite mostrar la etiqueta, el valor, el porcentaje o cualquier combinación de ellos como contenido de la leyenda para cada porción del gráfico.

    También puedes modificar la insignia de Leyenda de Objeto. Por defecto, aparece como un círculo relleno correspondiente al color de la porción asociada en la gráfica. Puedes configurarlo usando laLegendItemBadgeShape propiedad del gráfico, y puedes configurarlo como un círculo, línea, barra, columna y más.

    A continuación hay un ejemplo que demuestra el uso del ItemLegend con elIgbDataPieChart.

    Blazor 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 en elIgbDataPieChart tiene tres propiedades principales configurables -OthersCategoryType,OthersCategoryThreshold, yOthersCategoryText que te permiten configurar cómo se muestra el corte de Otros en el gráfico. A continuación se describen cada una:

    LaOthersCategoryType propiedad funciona en conjunto con laOthersCategoryThreshold propiedad de laIgbDataPieChart. Para elOthersCategoryType, puedes definir si quieres que seOthersCategoryThreshold evalúe como un número o como un porcentaje. Por ejemplo, si decides el número y fijas elOthersCategoryThreshold en 5, cualquier porción que tenga un valor menor que 5 pasará a formar parte de la categoría Otros. Usando el mismo valor de 5 con un tipo de porcentaje, cualquier valor que sea inferior al 5 por ciento del total de losIgbDataPieChart valores pasará a formar parte de la categoría Otros.

    Para obtener los datos subyacentes que están contenidos en la sección de Otros en el gráfico, puedes utilizar elGetOthersContext método del gráfico. Este tipo de retorno de este método es unIgbOthersCategoryContext que expone unaItems propiedad. LaItems propiedad devuelve un array que contendrá los elementos de la porción de los Otros. Además, al hacer clic en la porción de Otros, laItem propiedad de los argumentosSeriesClick del evento también devolverá estoIgbOthersCategoryContext.

    Por defecto, la porción de Otros se representará con una etiqueta de "Otros". Puedes cambiar esto modificando laOthersCategoryText propiedad de la carta.

    Si quieres asegurarte de que la categoría Otros no aparezca en elIgbDataPieChart, puedes poner elOthersCategoryThreshold en 0.

    El siguiente ejemplo demuestra el uso de la sección Others en elIgbDataPieChart:

    Blazor Data Pie Chart Selection

    PermiteIgbDataPieChart seleccionar las porciones haciendo clic con el ratón en las porciones representadas en la tabla. Esto puede configurarse utilizando lasSelectionBehavior propiedades ySelectionMode del gráfico, descritas a continuación:

    Las dos opciones principales de laSelectionBehavior serie sonPerDataItemSingleSelect yPerDataItemMultiSelect, que permitirán la selección individual y múltiple, respectivamente.

    LaSelectionMode propiedad expone una enumeración que determina cómo responden los segmentos del gráfico circular a ser seleccionados. Las siguientes son las opciones de esa enumeración y qué hacen:

    • Brighten: Las porciones seleccionadas estarán resaltadas.
    • FadeOthers: Las rodajas seleccionadas mantendrán su mismo color y las demás se desvanecerán.
    • FocusColorFill: Las porciones seleccionadas cambiarán su fondo al FocusBrush del gráfico.
    • FocusColorOutline: Las porciones seleccionadas tendrán un contorno con el color definido por el FocusBrush del gráfico.
    • FocusColorThickOutline: Las porciones seleccionadas tendrán un contorno con el color definido por el FocusBrush del gráfico. El grosor de este contorno también puede configurarse mediante la propiedad de Grosor del control.
    • GrayscaleOthers: Las porciones no seleccionadas tendrán un filtro de color gris aplicado.
    • None: No hay efecto en las porciones seleccionadas.
    • SelectionColorFill: Las porciones seleccionadas cambiarán su fondo al SelectionBrush del gráfico.
    • SelectionColorOutline: Las porciones seleccionadas tendrán un contorno con el color definido por el Pincel de Selección del gráfico.
    • SelectionColorThickOutline: Las porciones seleccionadas tendrán un contorno con el color definido por el FocusBrush del gráfico. El grosor de este contorno también puede configurarse mediante la propiedad de Grosor del control.
    • ThickOutline: Las rebanadas seleccionadas aplicarán un contorno cuyo grosor dependerá de la propiedad de 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.

    El siguiente ejemplo demuestra la función de selección delIgbDataPieChart control:

    Blazor Data Pie Chart Highlighting

    SoportaIgbDataPieChart el resaltado con ratón, así como una superposición de resaltado que puede configurarse proporcionando una fuente de datos separada.

    Primero, laHighlightingBehavior propiedad enumerada determina cómo se resaltará una porción. A continuación, se presentan las opciones de esa propiedad y qué hacen:

    • DirectlyOver: Las cortes solo se resaltan cuando el ratón está directamente encima.
    • NearestItems: El corte más cercano a la posición del ratón se resaltará.
    • NearestItemsAndSeries: Se resaltará el corte 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 estarán resaltados y las formas principales de la serie no se resaltarán el énfasis.

    LaHighlightingMode propiedad enumerada determina cómo responden las porciones del gráfico circular de datos a ser resaltadas. A continuación, se presentan las opciones de esa propiedad y qué hacen:

    • Brighten: La serie tendrá su color más claro cuando la posición del ratón esté sobre o cerca de ella.
    • BrightenSpecific: La rebanada específica tendrá su color más claro cuando la posición del ratón esté sobre o cerca de ella.
    • FadeOthers: La serie mantendrá su color cuando la posición del ratón esté sobre o cerca de ella, mientras que las demás aparecerán desvaídas.
    • FadeOthersSpecific: El corte específico mantendrá su color cuando la posición del ratón esté sobre o cerca de ella, mientras que los demás parecerán desvanecidos.
    • None: La serie y los slices no se destacarán.

    El siguiente ejemplo demuestra los comportamientos de resaltado del ratón delIgbDataPieChart componente:

    Además del resaltado del ratón, elIgbDataPieChart filtro de resaltado puede mostrar un subconjunto de tus datos. Esto se aplica especificando aHighlightedDataSource para el control y estableciendo laHighlightedValuesDisplayMode propiedad enOverlay. ElHighlightedDataSource espera un subconjunto de los datos asignados a laDataSource propiedad de laIgbDataPieChart.

    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.

    En el ejemplo siguiente se muestra el filtrado de resaltados.

    Blazor Data Pie Chart Animation

    LosIgbDataPieChart soportes animan sus cortes en la vista, así como cuando cambia un valor.

    Puedes poner laIsTransitionInEnabled propiedad en true para que el gráfico circular se anime en la vista. El tipo de animación realizada puede configurarse configurando laTransitionInMode propiedad enumerada al tipo de animación que deseas ver. Además, también puedes configurar laTransitionInSpeedType propiedad para que escale con índice, valor, normal o aleatorizado. La duración de esta animación puede controlarse mediante laTransitionInDuration propiedad, que requiere unaTimeSpan.

    Si quieres animar cambios de datos, esto también se puede hacer poniendo laAnimateSeriesWhenAxisRangeChanges propiedad en true. La duración de este cambio también puede configurarse estableciendo laTransitionDuration propiedad.

    El siguiente ejemplo demuestra el uso de la animación en elIgbDataPieChart:

    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 IgbDataPieChart IgbDataPieChart
    Item Legend IgbItemLegend IgbItemLegend