Rendimiento del gráfico Angular
Los gráficos Angular están optimizados para un alto rendimiento al representar millones de puntos de datos y actualizarlos cada pocos milisegundos. Sin embargo, existen varias características del gráfico que afectan el rendimiento del gráfico y deben tenerse en cuenta al optimizar el rendimiento de su aplicación. Este tema lo guiará para que los gráficos Angular funcionen lo más rápido posible en su aplicación.
Angular Chart Performance Examples
Los siguientes ejemplos demuestran dos escenarios de alto rendimiento de gráficos Angular.
Angular Chart with High-Frequency
En el escenario de alta frecuencia, los gráficos Angular pueden representar elementos de datos que se actualizan en tiempo real o en intervalos de milisegundos específicos. No experimentará retrasos, parpadeos en la pantalla ni retrasos visuales, incluso cuando interactúe con el gráfico en un dispositivo táctil. El siguiente ejemplo demuestra el escenario IgxCategoryChartComponent en alta frecuencia.
Angular Chart with High-Volume
En un escenario de gran volumen, los gráficos Angular pueden representar 1 millón de puntos de datos mientras el gráfico sigue proporcionando un rendimiento fluido cuando los usuarios finales intentan acercar/alejar o navegar por el contenido del gráfico. El siguiente ejemplo demuestra IgxCategoryChartComponent en un escenario de gran volumen.
General Performance Guidelines
Esta sección enumera pautas y características de gráficos que se suman a las actualizaciones generales y de procesamiento en los gráficos Angular.
Data Size
Si necesita trazar fuentes de datos con una gran cantidad de puntos de datos (por ejemplo, más de 10 000), le recomendamos utilizar Angular IgxDataChartComponent con uno de los siguientes tipos de series que fueron diseñadas especialmente para ese propósito.
- Gráfico de dispersión HD en lugar de Gráfico de puntos de categoría o gráfico de marcadores de dispersión
- Gráfico de polilíneas de dispersión en lugar de Gráfico de líneas de categorías o Gráfico de líneas de dispersión
- Gráfico de polígonos de dispersión en lugar de Gráfico de áreas de categorías o Gráfico de columnas
Data Structure
Aunque los gráficos Angular admiten la representación de múltiples fuentes de datos vinculando una matriz de matrices de puntos de datos a la propiedad ItemsSource. Es mucho más rápido para los gráficos si se combinan varias fuentes de datos en una sola fuente de datos donde cada elemento de datos contiene varias columnas de datos en lugar de solo una columna de datos. Por ejemplo:
this.CategoryChart.dataSource = FlattenDataSource.create();
this.FinancialChart.dataSource = FlattenDataSource.create();
export class FlattenDataSource {
public static create(): any[] {
const data: any[] = [];
data.push({ "Year": "1996", "USA": 148, "CHN": 110 });
data.push({ "Year": "2000", "USA": 142, "CHN": 115 });
return data;
}
}
// instead of this data structure:
export class MultiDataSources {
public static create(): any[] {
const dataSource1: any[] = [];
dataSource1.push({ "Year": "1996", "Value": 148 });
dataSource1.push({ "Year": "2000", "Value": 142 });
const dataSource2: any[] = [];
dataSource2.push({ "Year": "1996", "Value": 110 });
dataSource2.push({ "Year": "2000", "Value": 115 });
const multipleSources: any[] = [dataSource1, dataSource2];
return multipleSources;
}
}
Data Filtering
Angular IgxCategoryChartComponent y los controles IgxFinancialChartComponent tienen un adaptador de datos incorporado que analiza sus datos y genera series de gráficos para usted. Sin embargo, funciona más rápido si usas includedProperties y excludedProperties para filtrar solo aquellas columnas de datos que realmente deseas representar. Por ejemplo,
this.Chart.includedProperties = [ "Year", "USA", "RUS" ];
this.Chart.excludedProperties = [ "CHN", "FRN", "GER" ];
Chart Performance Guidelines
Chart Types
Los tipos de gráficos más simples, como Gráfico de líneas tienen un rendimiento más rápido que el uso del gráfico spline debido a la compleja interpolación de líneas spline entre puntos de datos. Por lo tanto, debe usar la propiedad chartType de Angular IgxCategoryChartComponent o el control IgxFinancialChartComponent para seleccionar el tipo de gráfico que se representa más rápido. Alternativamente, puede cambiar un tipo de serie a una serie más rápida en el control Angular IgxDataChartComponent.
La siguiente tabla enumera los tipos de gráficos en orden desde el rendimiento más rápido hasta el rendimiento más lento en cada grupo de gráficos:
* Tenga en cuenta que el gráfico de polígonos de dispersión y el gráfico de polilíneas de dispersión tienen un mejor rendimiento que el resto de gráficos si tiene muchas fuentes de datos vinculadas al gráfico. Para obtener más información, consulte la sección Colección de series. De lo contrario, otros tipos de gráficos son más rápidos.
Animaciones de gráficos
Habilitar animaciones de gráficos retrasará ligeramente la serie de renderizado final en los gráficos Angular mientras se reproducen animaciones de transición.
Anotaciones de gráfico
Habilitar anotaciones de gráficos, como anotaciones de llamadas, anotaciones de punto de mira o anotaciones de valor final, disminuirá ligeramente el rendimiento del gráfico Angular.
Resaltado de gráficos
Habilitar el resaltado del gráfico disminuirá ligeramente el rendimiento del gráfico Angular.
Chart Legend
Agregar una leyenda a los gráficos Angular puede disminuir el rendimiento si los títulos de las series o los elementos de datos asignados a la leyenda cambian con frecuencia en tiempo de ejecución.
Marcadores de gráfico
En los gráficos Angular, los marcadores son especialmente costosos en lo que respecta al rendimiento del gráfico porque aumentan la complejidad del diseño del gráfico y realizan la vinculación de datos para obtener cierta información. Además, los marcadores disminuyen el rendimiento cuando hay muchos puntos de datos o si hay muchas fuentes de datos vinculadas. Por lo tanto, si no se necesitan marcadores, se deben eliminar del gráfico.
Este fragmento de código muestra cómo eliminar marcadores de los gráficos Angular.
// on CategoryChart or FinancialChart
this.Chart.markerTypes.clear();
this.Chart.markerTypes.add(MarkerType.None);
// on LineSeries of DataChart
this.LineSeries.markerType = MarkerType.None;
Chart Resolution
Establecer la propiedad resolution en un valor más alto mejorará el rendimiento, pero reducirá la fidelidad gráfica de las líneas de las series trazadas. Como tal, se puede aumentar hasta que la fidelidad sea inaceptable.
Este fragmento de código muestra cómo disminuir la resolución en los gráficos Angular.
// on CategoryChart or FinancialChart:
this.Chart.Resolution = 10;
// on LineSeries of DataChart:
this.LineSeries.Resolution = 10;
Superposiciones de gráficos
Habilitar superposiciones de gráficos disminuirá ligeramente el rendimiento del gráfico Angular.
Líneas de tendencia del gráfico
Habilitar las líneas de tendencia del gráfico disminuirá ligeramente el rendimiento del gráfico Angular.
Tipos de ejes
No se recomienda el uso del eje x con soporte DateTime si los espacios entre puntos de datos, según la cantidad de tiempo entre ellos, no son importantes. En su lugar, se debe utilizar el eje ordinal/categoría porque es más eficiente en la forma en que fusiona los datos. Además, el eje ordinal/categoría no realiza ninguna clasificación de los datos como lo hace el eje x basado en el tiempo.
[!Note] The
IgxCategoryChartComponentalready uses ordinal/category axis so there is no need to change its properties.
Este fragmento de código muestra cómo ordinal/categoría el eje x en los controles IgxFinancialChartComponent e IgxDataChartComponent.
<igx-financial-chart xAxisMode="Ordinal"></igx-financial-chart>
<igx-data-chart>
<igx-category-x-axis label="Time"></igx-category-x-axis>
</igx-data-chart>
Axis Intervals
De forma predeterminada, los gráficos Angular calcularán automáticamente yAxisInterval según el rango de sus datos. Por lo tanto, debe evitar establecer el intervalo de eje, especialmente en un valor pequeño, para evitar la representación de demasiadas líneas de cuadrícula y etiquetas de eje. Además, es posible que desee considerar aumentar la propiedad yAxisInterval a un valor mayor que el intervalo de eje calculado automáticamente si no necesita muchas líneas de cuadrícula o etiquetas de eje.
[!Note] We do not recommend setting axis minor interval as it will decrease chart performance.
Este fragmento de código muestra cómo establecer el intervalo del eje mayor en los gráficos Angular.
<igx-category-chart xAxisInterval="5" yAxisInterval="50"></igx-category-chart>
<igx-financial-chart xAxisInterval="5" yAxisInterval="50"></igx-financial-chart>
<igx-data-chart>
<igx-category-x-axis name="xAxis" interval="5"></igx-category-x-axis>
<igx-numeric-y-axis name="yAxis" interval="50"></igx-numeric-y-axis>
</igx-data-chart>
Axis Scale
Se recomienda establecer la propiedad yAxisIsLogarithmic en false para obtener un mayor rendimiento, ya que se necesitan menos operaciones que calcular el rango de ejes y los valores de las etiquetas de los ejes en escala logarítmica.
Axis Labels Visibility
De la misma manera que los marcadores, las etiquetas de los ejes también son costosas porque utilizan plantillas y enlaces, y es posible que su contexto de datos cambie con frecuencia. Si no se utilizan etiquetas, se deben ocultar o se debe aumentar su intervalo para disminuir el número de etiquetas de eje.
Este fragmento de código muestra cómo ocultar las etiquetas de los ejes en los gráficos Angular.
<igx-category-chart xAxisLabelVisibility="Collapsed" yAxisLabelVisibility="Collapsed">
</igx-category-chart>
<igx-financial-chart xAxisLabelVisibility="Collapsed" yAxisLabelVisibility="Collapsed">
</igx-financial-chart>
<igx-data-chart>
<igx-category-x-axis name="xAxis" labelVisibility="Collapsed"></igx-category-x-axis>
<igx-numeric-y-axis name="yAxis" labelVisibility="Collapsed"></igx-numeric-y-axis>
</igx-data-chart>
Axis Labels Abbreviation
Sin embargo, los gráficos Angular admiten la abreviatura de números grandes (por ejemplo, más de 10 000) que se muestran en las etiquetas de los ejes cuando yAxisAbbreviateLargeNumbers está establecido en verdadero. En su lugar, recomendamos preprocesar valores grandes en sus elementos de datos dividiéndolos en un factor común y luego configurando yAxisTitle en una cadena que represente el factor utilizado para abreviar los valores de sus datos.
Este fragmento de código muestra cómo configurar el título del eje en los gráficos Angular.
<igx-category-chart yAxisTitle="In millions of Dollars"></igx-category-chart>
<igx-financial-chart yAxisTitle="In millions of Dollars"></igx-financial-chart>
<igx-data-chart>
<igx-numeric-y-axis title="In millions of Dollars"></igx-numeric-y-axis>
</igx-data-chart>
Axis Labels Extent
En tiempo de ejecución, los gráficos Angular ajustan la extensión de las etiquetas en el eje y en función de la etiqueta con el valor más largo. Esto podría disminuir el rendimiento del gráfico si el rango de datos cambia y las etiquetas deben actualizarse con frecuencia. Por lo tanto, se recomienda establecer la extensión de la etiqueta en el momento del diseño para mejorar el rendimiento del gráfico.
El siguiente fragmento de código muestra cómo establecer una extensión fija para las etiquetas en el eje y en los gráficos Angular.
<igx-category-chart xAxisLabelExtent="50" yAxisLabelExtent="50"></igx-category-chart>
<igx-financial-chart xAxisLabelExtent="50" yAxisLabelExtent="50"></igx-financial-chart>
<igx-data-chart>
<igx-category-x-axis name="xAxis" labelExtent="50"></igx-category-x-axis>
<igx-numeric-y-axis name="yAxis" labelExtent="50"></igx-numeric-y-axis>
</igx-data-chart>
Axis Other Visuals
Habilitar elementos visuales de eje adicionales (por ejemplo, títulos de eje) o cambiar sus valores predeterminados puede disminuir el rendimiento en los gráficos Angular.
Por ejemplo, cambiando estas propiedades en el control IgxCategoryChartComponent o IgxFinancialChartComponent:
| eje visual | Propiedades del eje X | Propiedades del eje Y |
|---|---|---|
| Todos los ejes visuales | xAxisIntervalxAxisMinorInterval |
yAxisIntervalyAxisMinorInterval |
| Marcas de eje | xAxisTickStroke xAxisTickStrokeThicknessxAxisTickLength |
yAxisTickStroke yAxisTickStrokeThicknessyAxisTickLength |
| Líneas de cuadrícula principales del eje | xAxisMajorStrokexAxisMajorStrokeThickness |
yAxisMajorStrokeyAxisMajorStrokeThickness |
| Líneas de cuadrícula del eje menor | xAxisMinorStrokexAxisMinorStrokeThickness |
yAxisMinorStrokeyAxisMinorStrokeThickness |
| Línea principal del eje | xAxisStrokexAxisStrokeThickness |
yAxisStrokeyAxisStrokeThickness |
| Títulos de eje | xAxisTitlexAxisTitleAngle |
yAxisTitleyAxisTitleAngle |
| Tiras de eje | xAxisStrip |
yAxisStrip |
O cambiando las propiedades de un IgxAxisComponent en el control IgxDataChartComponent:
| eje visual | Propiedades del eje |
|---|---|
| Todas las imágenes del eje | Interval, MinorInterval |
| Marcas de eje | TickStroke , TickStrokeThickness, TickLength |
| Líneas de cuadrícula principales del eje | MajorStroke, MajorStrokeThickness |
| Líneas de cuadrícula del eje menor | MinorStroke, MinorStrokeThickness |
| Línea principal del eje | Stroke, StrokeThickness |
| Títulos de eje | chartTitle, TitleAngle |
| Tiras de eje | Strip |
Performance in Financial Chart
Además de las pautas de rendimiento anteriores, el control Angular IgxFinancialChartComponent tiene las siguientes características únicas que afectan el rendimiento.
Y-Axis Mode
Se recomienda configurar la opción yAxisMode en Numeric para obtener un mayor rendimiento, ya que se necesitan menos operaciones que usar el modo PercentChange.
Chart Panes
Configurar muchos paneles usando las opciones indicatorTypes y overlayTypes puede disminuir el rendimiento y se recomienda utilizar algunos indicadores financieros y una superposición financiera.
Control deslizante de zoom
Establecer la opción zoomSliderType en None mejorará el rendimiento del gráfico y permitirá más espacio vertical para otros indicadores y el panel de volumen.
Volume Type
Establecer la propiedad volumeType puede tener el siguiente impacto en el rendimiento del gráfico:
None: es el menos costoso ya que no muestra el panel de volumen.Line: es un tipo de volumen más costoso de renderizar y se recomienda al renderizar muchos puntos de datos o al trazar muchas fuentes de datos.Area: es más costoso de renderizar que el tipo de volumenLine.IgxColumn: es más costoso de renderizar que el tipo de volumenAreay se recomienda cuando se renderizan datos de volumen de 1 a 3 stocks.
Performance in Data Chart
Además de las pautas generales de rendimiento, el control Angular IgxDataChartComponent tiene las siguientes características únicas que afectan el rendimiento.
Axes Collection
Agregar demasiados ejes a la colección Axes del control IgxDataChartComponent disminuirá el rendimiento del gráfico y recomendamos compartir ejes entre series.
Series Collection
Además, agregar muchas series a la colección IgxSeriesComponent del control Angular IgxDataChartComponent agregará una sobrecarga al renderizado porque cada serie tiene su propio lienzo de renderizado. Esto es especialmente importante si tiene más de 10 series en el Gráfico de datos. Recomendamos combinar múltiples fuentes de datos para aplanar la fuente de datos (consulte la sección Estructura de datos) y luego usar la función de estilo condicional de la siguiente serie:
| Escenario de rendimiento más lento | Escenario más rápido con estilo condicional |
|---|---|
10+ deIgxLineSeriesComponent |
SolteroIgxScatterLineSeriesComponent |
20+ deIgxLineSeriesComponent |
SolteroIgxScatterPolylineSeriesComponent |
10+ deIgxScatterLineSeriesComponent |
SolteroIgxScatterPolylineSeriesComponent |
10+ deIgxPointSeriesComponent |
SolteroIgxScatterSeriesComponent |
20+ deIgxPointSeriesComponent |
SolteroIgxHighDensityScatterSeriesComponent |
20+ deIgxScatterSeriesComponent |
SolteroIgxHighDensityScatterSeriesComponent |
10+ deIgxAreaSeriesComponent |
SolteroIgxScatterPolygonSeriesComponent |
10+ deIgxColumnSeriesComponent |
SolteroIgxScatterPolygonSeriesComponent |
Additional Resources
Puede encontrar más información sobre tipos de gráficos relacionados en estos temas:
- Gráfico de áreas
- Gráfico de barras
- Gráfico de burbujas
- Gráfico de columnas
- Gráfico de anillos
- Gráfico circular
- Gráfico de puntos
- Gráfico polar
- Gráfico radial
- Gráfico de formas
- Gráfico de líneas
- Gráfico de dispersión
- Gráfico apilado
- Gráfico de pasos
- Gráfico de acciones
- Animaciones de gráficos
- Anotaciones de gráfico
- Resaltado de gráfico
- Marcadores de gráfico
- Superposiciones de gráficos
- Líneas de tendencia del gráfico
API References
La siguiente tabla enumera los miembros de API mencionados en las secciones anteriores:
resolutionindicatorTypesoverlayTypesvolumeTypezoomSliderTypexAxisModeyAxisModexAxisIntervalyAxisIntervalxAxisMinorIntervalyAxisMinorIntervalxAxisLabelVisibilityyAxisLabelVisibilityyAxisIsLogarithmic
GitHub