Rendimiento de los gráficos de Angular
Angular gráficos están optimizados para un alto rendimiento de representación de millones de puntos de datos y actualización cada pocos milisegundos. Sin embargo, hay varias características del gráfico que afectan al rendimiento del gráfico y se deben tener en cuenta al optimizar el rendimiento de la aplicación. Este tema le guiará para que Angular gráficos funcionen lo más rápido posible en su aplicación.
Angular Chart Performance Examples
En los ejemplos siguientes se muestran dos escenarios de alto rendimiento de gráficos de Angular.
Angular Chart with High-Frequency
En escenarios de alta frecuencia, los Angular Gráficos pueden renderizar elementos de datos que se actualizan en tiempo real o en intervalos de milisegundos especificados. No experimentarás retraso, ni parpadeo en la pantalla ni retrasos visuales, incluso al interactuar con el gráfico en un dispositivo táctil. El siguiente ejemplo demuestra elIgxCategoryChartComponent escenario de Alta Frecuencia.
Angular Chart with High-Volume
En escenarios de alto volumen, los gráficos de Angular pueden renderizar 1 millón de puntos de datos mientras el gráfico sigue ofreciendo un rendimiento fluido cuando los usuarios finales intentan acercar/alejar o navegar por el contenido del gráfico. El siguiente ejemplo demuestra elIgxCategoryChartComponent escenario de Alto Volumen.
General Performance Guidelines
En esta sección se enumeran las directrices y las características del gráfico que se suman a la sobrecarga y al procesamiento de las actualizaciones en los gráficos Angular.
Data Size
Si necesitas representar fuentes de datos con un gran número de puntos de datos (por ejemplo, 10.000+), recomendamos usar AngularIgxDataChartComponent 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 Angular gráficos permiten renderizar múltiples fuentes de datos vinculando arreglos de arrays de puntos de datos aItemsSource propiedades. Es mucho más rápido para los gráficos si varias fuentes de datos se aplanan en una única fuente de datos donde cada elemento contiene varias columnas de datos en lugar de solo una columna. 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
AngularIgxCategoryChartComponent y losIgxFinancialChartComponent controles tienen un adaptador de datos integrado que analiza tus datos y genera series de gráficos para ti. Sin embargo, funciona más rápido si usasincludedProperties yexcludedProperties filtras solo aquellas columnas de datos que realmente quieres renderizar. 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 sencillos como Gráfico de líneas tienen un rendimiento más rápido que el uso de Spline Chart debido a la compleja interpolación de líneas spline entre puntos de datos. Por lo tanto, deberías usarchartType la propiedad de AngularIgxCategoryChartComponent o elIgxFinancialChartComponent control para seleccionar el tipo de gráfico que se renderice más rápido. Alternativamente, puedes cambiar un tipo de serie por una más rápida en AngularIgxDataChartComponent control.
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
La habilitación de las animaciones de gráficos retrasará ligeramente la serie de representación final en los gráficos de Angular mientras se reproducen las animaciones de transición.
Anotaciones de gráfico
La habilitación de anotaciones de gráfico, como las anotaciones de llamada, las anotaciones en cruz o las anotaciones de valor final, disminuirá ligeramente el rendimiento del gráfico de 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 de Angular puede disminuir el rendimiento si los títulos de las series o los elementos de datos asignados a la leyenda cambian a menudo en tiempo de ejecución.
Marcadores de gráfico
En Angular gráficos, los marcadores son especialmente costosos cuando se trata del rendimiento del gráfico porque aumentan la complejidad del diseño del gráfico y realizan el enlace de datos para obtener cierta información. Además, los marcadores disminuyen el rendimiento cuando hay muchos puntos de datos o si hay muchos orígenes de datos enlazados. Por lo tanto, si los marcadores no son necesarios, deben eliminarse del gráfico.
Este fragmento de código muestra cómo eliminar marcadores de los gráficos de 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
Poner laresolution propiedad en un valor más alto mejorará el rendimiento, pero reducirá la fidelidad gráfica de las líneas de series trazadas. Por tanto, puede aumentarse 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
La habilitación de las superposiciones de gráficos disminuirá ligeramente el rendimiento del gráfico Angular.
Líneas de tendencia del gráfico
La habilitación de 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 ordinar/categorizar el eje x en losIgxFinancialChartComponent controles yIgxDataChartComponent.
<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
Por defecto, Angular gráficos calcularányAxisInterval automáticamente en función del rango de tus datos. Por lo tanto, deberías evitar establecer el intervalo de eje, especialmente a un valor pequeño, para evitar renderizar demasiadas líneas de cuadrícula y etiquetas de eje. Además, podrías considerar aumentaryAxisInterval la propiedad a un valor mayor que el intervalo de ejes calculado automáticamente si no necesitas 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 principal del eje 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 poner layAxisIsLogarithmic propiedad en false para un mayor rendimiento, ya que se requieren 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 de 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
Aunque los gráficos de Angular admiten la abreviatura de números grandes (por ejemplo, 10.000+) que se muestran en etiquetas de eje cuandoyAxisAbbreviateLargeNumbers está configurado como verdadero. Recomendamos, en cambio, preprocesar valores grandes en tus datos dividiéndolos como un factor común y luego estableceryAxisTitle una cadena que represente el factor usado para abreviar tus valores.
Este fragmento de código muestra cómo establecer 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 de Angular ajustan la extensión de las etiquetas en el eje Y en función de una 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 tiempo de diseño para mejorar el rendimiento del gráfico.
En el siguiente fragmento de código se 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
La habilitación de objetos visuales de eje adicionales (por ejemplo, los títulos de los ejes) o el cambio de sus valores predeterminados puede disminuir el rendimiento en los gráficos de Angular.
Por ejemplo, cambiar estas propiedades en elIgxCategoryChartComponent control oIgxFinancialChartComponent:
| 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 cambiar las propiedades de unIgxAxisComponent en elIgxDataChartComponent control:
| 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 directrices de rendimiento mencionadas, el control AngularIgxFinancialChartComponent tiene las siguientes características únicas que afectan al rendimiento.
Y-Axis Mode
Se recomienda configurar layAxisMode opción enNumeric para un mayor rendimiento, ya que se requieren menos operaciones que usandoPercentChange el modo.
Chart Panes
Configurar muchos paneles yindicatorTypesoverlayTypes opciones puede disminuir el rendimiento y se recomienda usar algunos indicadores financieros y una superposición financiera.
Control deslizante de zoom
Configurar lazoomSliderType opciónNone mejora el rendimiento de los gráficos y permite más espacio vertical para otros indicadores y el panel de volumen.
Volume Type
La configuración de lavolumeType propiedad puede tener el siguiente impacto en el rendimiento de los gráficos:
None- es el menos costoso ya que no muestra el panel de volumen.Line- es un tipo de volumen más caro de renderizar y se recomienda al renderizar muchos puntos de datos o al graficar muchas fuentes de datos.Area- es más caro de renderizar que elLinetipo de volumen.Column- es más caro de renderizar que elAreatipo de volumen y se recomienda al renderizar datos de volumen de 1-3 acciones.
Performance in Data Chart
Además de las directrices generales de rendimiento, el control de AngularIgxDataChartComponent tiene las siguientes características únicas que afectan al rendimiento.
Axes Collection
Añadir demasiados ejes a laAxes colección de controlesIgxDataChartComponent disminuirá el rendimiento en las listas y recomendamos compartir ejes entre series.
Series Collection
Además, añadir muchas series a laIgxSeriesComponent colección del control de AngularIgxDataChartComponent añadirá sobrecarga al renderizado porque cada serie tiene su propio lienzo de renderizado. Esto es especialmente importante si tienes más de 10 unidades en la Gráfico de datos. Recomendamos combinar múltiples fuentes de datos en una fuente de datos aplanada (véase la sección de Estructura de Datos) y luego usar la característica 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