Análisis de los datos
El análisis de datos es el proceso de examinar, transformar y organizar datos de una manera específica para generar información útil basada en ellos. También permite llegar a ciertos resultados y conclusiones a través del razonamiento analítico y lógico.
Esta funcionalidad se introducirá en Ignite UI for Angular como paquete externo para facilitar la configuración y limitar el código requerido al mínimo
Análisis de datos con DockManager
Continúe y realice una cell range selection
o column selection
para habilitar la Chart types view
en función de los datos seleccionados. Esta vista es parte del panel derecho de Dock Manager. Desde allí puedes:
- Elija un tipo de gráfico específico y visualícelo en un panel separado.
- O utilice el botón contextual
Data Analysis
para mostrar diferentes opciones de formato de texto.
El componente web Dock Manager proporciona medios para administrar el diseño de la aplicación a través de paneles y permite a los usuarios finales personalizarla aún más fijando, cambiando el tamaño, moviendo y ocultando paneles. Después de seleccionar los datos, continúe, cree un par de gráficos y fíjelos (arrastrándolos) a las áreas disponibles.
Tenga en cuenta (muestra relacionada):
- En el nuevo cuadro de selección de datos, se actualizarán los datos.
- Si se aplica la selección de rango de varias celdas, solo estará disponible la funcionalidad
Text formatting
. - Si los datos seleccionados no son compatibles con ninguno de los gráficos, se mostrará un mensaje de advertencia "Datos incompatibles".
Paquete de análisis de datos
Puede comenzar a utilizar esta funcionalidad siguiendo los pasos a continuación. Tenga en cuenta que el paquete igniteui-angular-extras solo está disponible a través de nuestro feed npm privado. Si tiene una licencia comercial válida, tendrá acceso al feed privado.
Empecemos con:
- Instalación del paquete en su aplicación
npm install @infragistics/igniteui-angular-extras
cmd
- Instalación del paquete de dependencias entre pares
npm install @infragistics/igniteui-angular igniteui-angular-core igniteui-angular-charts
cmd
- Después de la instalación de los paquetes, continúe y:
- Agregue el
IgxExtrasModule
a su app.module.ts - Aplique las directivas
igxChartIntegration
,igxConditionalFormatting
,igxContextMenu
a su grid
- Agregue el
<igx-grid #grid1 igxChartIntegration igxConditionalFormatting igxContextMenu
[data]="localData" [autoGenerate]="true">
<igx-paginator>
</igx-paginator>
</igx-grid>
html
¡Y eso es! Ahora puede realizar la selección del rango de celdas y seguir el flujo de análisis de datos.
Botón de análisis de datos
El botón de análisis de datos es la salida para visualizar los datos seleccionados de varias maneras:

De esta manera, cada selección de rango realizada en la cuadrícula se puede analizar fácilmente con un solo clic.
El botón se representa en cada selección de rango en la parte inferior derecha de la selección y se oculta cuando la selección está inactiva. El desplazamiento horizontal y vertical reposiciona el botón para que siempre se muestre en su posición designada.
Integración de gráficos
Esta sección presenta la integración de Grid con la funcionalidad de gráficos, que permite al usuario final visualizar un gráfico basado en los datos seleccionados de Grid y elegir diferentes tipos de gráficos si es necesario.
El gráfico se mostrará seleccionando un rango de celdas y haciendo clic en el botón Mostrar análisis.
La opción de creación de gráficos solo está disponible cuando hay valores numéricos en los datos seleccionados.
Actualmente admitimos los siguientes tipos de gráficos:
- Gráfico de columnas, Gráfico de áreas, Gráfico de líneas, Gráfico de barras,
- Gráfico apilado, Gráfico apilado 100%,
- Gráfico circular, Gráfico de dispersión, gráfico de burbujas Para mostrar un gráfico de burbujas significativo, desactivamos la vista previa cuando los datos no están en un formato válido.
Formato de celda condicional
Si tiene una cuadrícula con miles de filas de datos, sería muy difícil ver patrones y tendencias simplemente examinando la información sin procesar. Al igual que los gráficos y minigráficos, Conditional formatting
proporciona otra forma de visualizar datos y hacerlos más fáciles de entender.
Comprender el formato condicional: permite aplicar formato, como colores y barras de datos, a las celdas en función de their value
en la selección de rango. El siguiente ejemplo demuestra cómo puede configurar Grid para aplicar Conditional Formatting
. Depende del Conditional formatting selection type
qué rules
de condición se mostrarán. A continuación encontrará los estilos predefinidos (ajustes preestablecidos) que puede utilizar para aplicar rápidamente formato condicional a sus datos. El formateo de un rango se borra al realizar el formateo en un rango diferente o mediante el botón Borrar. El botón borrar solo está activo cuando hay un formato aplicado.
Selección de rango de números
Data Bars
: las barras de datos pueden ayudarle a detectar números mayores y menores, como los productos más vendidos y los menos vendidos. Este ajuste preestablecido hace que sea muy fácil visualizar valores en un rango de celdas seleccionadas. Una barra más larga representa un valor más alto. Una celda que tiene un valor de 0 no tiene barra de datos; todas las demás celdas se llenan proporcionalmente. Los valores positivos serán de colorgreen
y los valores negativos serán dered

Color Scale
: el tono del color representa el valor en la celda. Las celdas que contienen valores por debajo del*Lowest threshold
se colorearán enred
. Las celdas que estén por encima del*Highest threshold
se colorearán engreen
. Y todas las celdas que estén entre elHighest threshold
Lowest
y más alto se colorearán enyellow
.
Lowest threshold
: por debajo del 33 % del valor máximo de celda en la selección de rango.
Highest threshold
: por encima del 66 % del valor máximo de celda en la selección de rango.

Top 10%
: utilice este ajuste preestablecido para resaltar los valores que equivalen al 10% superior de los datos seleccionados.

Greater than
: este ajuste preestablecido marca todos los valoresGreater than the avarege
Duplicate values
: marca todos los valores duplicados.Unique values
: se marcarán todos los valores de celda que sean únicos (color de fondoblue
).

Empty
: marca todas las celdas con valoresundefined
Selección de rango de texto
Text contains
: marca todas las celdas que contienen el valor de latop-left most selected cell
. Ejemplo:

Duplicate values
: marca todos los valores duplicados.Unique values
: se marcarán todos los valores de celda que sean únicos (color de fondoblue
).Empty
: marca todas las celdas con valoresundefined
Manifestación
API del paquete de análisis de datos
Directiva de formato condicional Igx
API | Descripción | Argumentos |
---|---|---|
ConditionalFormattingType |
Una enumeración, que representa los tipos de formato condicional. | |
IFormatColors |
Una interfaz que representa los colores de formato. | |
formatter : string |
Una propiedad de entrada, que establece/obtiene el tipo de formato actual | |
formatColors |
Una propiedad de entrada, que establece/obtiene los colores de formato actuales | val : IFormatColors |
onFormattersReady |
Un evento que emite el mensaje aplicable.formatting types para los datos seleccionados, cuando sean determinados. |
|
formatCells |
Aplica formato condicional a las celdas seleccionadas. Uso: this.conditonalFormatting.formatCells(ConditionalFormattingType.dataBars) |
formatterName : string, formatRange ?: GridSelectionRange [ ], reset : boolean (true by default) |
clearFormatting |
Elimina el formato condicional de las celdas seleccionadas. Uso: this.conditonalFormatting.clearFormatting() |
Directiva de integración IgxChart
API | Descripción | Argumentos |
---|---|---|
CHART_TYPE |
Una enumeración que representa los tipos de gráficos admitidos. | |
OPTIONS_TYPE |
Una enumeración, que representa el tipo de opciones admitidas, que se puede aplicar a un componente del gráfico. | |
IOptions |
Una interfaz para opciones de propiedades de gráficos | |
chartFactory |
Crea un componente de gráfico, según el tipo de gráfico proporcionado. Uso: this.chartIntegration.chartFactory(CHART_TYPE.COLUMN_GROUPED, this.viewContainerRef) |
type : cualquiera[], viewContainerRef:ViewContainerRef |
setChartComponentOptions |
Establece opciones de propiedad para un componente de gráfico. Uso: this.chartIntegration.setChartComponentOptions(CHART_TYPE.PIE, OPTIONS_TYPE.CHART, {allowSliceExplosion: true, sliceClick: (evt) => { evt.args.isExploded = !evt.args.isExploded; } }) |
chart : CHART_TYPE, optionsType : OPTIONS_TYPE, options : IOptions |
getAvailableCharts |
Devuelve los tipos de gráficos habilitados | |
enableCharts |
Habilita los tipos de gráficos proporcionados. De forma predeterminada, todos los tipos de gráficos están habilitados. | types : CHART_TYPE [ ] |
disableCharts |
Deshabilita los tipos de gráficos proporcionados | types : CHART_TYPE [ ] |
onChartTypesDetermined |
Un evento, emitido cuando se escribe el gráfico, aplicable para elchartData , están determinadas. Este evento emite un objeto de tipoIDeterminedChartTypesArgs , que tiene 2 propiedades:chartsAvailabilty : Mapa<CHART_TYPE, booleano>- los tipos de gráficos habilitados/deshabilitados,chartsForCreation : CHART_TYPE[]- los tipos de gráficos aplicables para elchartData |
|
onChartCreationDone |
Un evento emitido cuando se crea un gráfico. Este evento emite el componente de gráfico, que se crea | |
chartData : any[ ] |
Una propiedad de entrada, que establece/obtiene los datos para los gráficos. | selectedData : any[ ] |
useLegend : boolean |
Una entrada que habilita/deshabilita el uso de leyendas para todos los tipos de gráficos. Por defecto está configurado en verdadero | |
defaultLabelMemberPath : string |
Una propiedad de entrada, que establece/obtiene la ruta del miembro de etiqueta predeterminada para los gráficos. De forma predeterminada, la ruta del miembro de la etiqueta se determinará en función de los datos proporcionados. (si los registros de datos proporcionados tienen propiedades con valores de cadena, el nombre de la propiedad de la primera cadena del primer registro de datos en el chartData se seleccionará como ruta del miembro de la etiqueta para los gráficos; de lo contrario, la ruta del miembro de la etiqueta tendrá el valor 'Índice'.) |
|
scatterChartYAxisValueMemberPath : string |
Una propiedad de entrada, que establece/obtiene la ruta del miembro de radio predeterminada para el gráfico de burbujas de dispersión. Si no se establece, la ruta del miembro del valor del eje Y predeterminada será el primer nombre de propiedad numérica del primer registro de datos en elchartData |
path : string |
bubbleChartRadiusMemberPath : string |
Una propiedad de entrada, que establece/obtiene la ruta del miembro de radio predeterminada para el gráfico de burbujas de dispersión. Si no se establece, la ruta predeterminada del miembro del radio será el segundo nombre de propiedad numérica del primer registro de datos en elchartData |
path : string |
Recursos útiles
- Angular Guía universal
- Kit de inicio de Ignite UI
- Terminología de renderizado del lado del servidor
- Primeros pasos con Ignite UI for Angular
- Guía de la interfaz de línea de comandos Ignite UI
- Ignite UI for Angular Guía de esquemas