Rendimiento de los gráficos de Web Components
Web Components 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 Web Components gráficos funcionen lo más rápido posible en su aplicación.
Web Components Chart Performance Examples
En los ejemplos siguientes se muestran dos escenarios de alto rendimiento de gráficos de Web Components.
Web Components Chart with High-Frequency
In High-Frequency scenario, the Web Components Charts can render data items that are updating in real time or at specified milliseconds intervals. You will experience no lag, no screen-flicker, and no visual delays, even as you interact with the chart on a touch-device. The following sample demonstrates the IgcCategoryChartComponent in High-Frequency scenario.
Web Components Chart with High-Volume
In High-Volume scenario, the Web Components Charts can render 1 million of data points while the chart keeps providing smooth performance when end-users tries zooming in/out or navigating chart content. The following sample demonstrates the IgcCategoryChartComponent in High-Volume scenario.
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 Web Components.
Data Size
If you need to plot data sources with large number of data points (e.g. 10,000+), we recommend using Web Components IgcDataChartComponent with one of the following type of series which where designed for specially for that purpose.
- 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
Although Web Components charts support rendering of multiple data sources by binding array of arrays of data points to ItemsSource property. It is much faster for charts if multiple data sources are flatten into single data source where each data item contains multiple data columns rather just one data column. For example:
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
Web Components IgcCategoryChartComponent and the IgcFinancialChartComponent controls have built-in data adapter that analyzes your data and generates chart series for you. However, it works faster if you use includedProperties and excludedProperties to filter only those data columns that you actually want to render. For example,
this.Chart.includedProperties = [ "Year", "USA", "RUS" ];
this.Chart.excludedProperties = [ "CHN", "FRN", "GER" ];
Chart Performance Guidelines
Chart Types
Simpler chart types such as Line Chart have faster performance than using Spline Chart because of the complex interpolation of spline lines between data points. Therefore, you should use chartType property of Web Components IgcCategoryChartComponent or the IgcFinancialChartComponent control to select type of chart that renders faster. Alternatively, you can change a type of series to a faster series in Web Components IgcDataChartComponent 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 Web Components 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 Web Components.
Resaltado de gráficos
Habilitar el resaltado del gráfico disminuirá ligeramente el rendimiento del gráfico Web Components.
Chart Legend
Agregar una leyenda a los gráficos de Web Components 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 Web Components 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 Web Components.
// 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
Setting the resolution property to a higher value will improve performance, but it will lower the graphical fidelity of lines of plotted series. As such, it can be increased up until the fidelity is unacceptable.
Este fragmento de código muestra cómo disminuir la resolución en los gráficos Web Components.
// 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 Web Components.
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 Web Components.
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
IgcCategoryChartComponentalready uses ordinal/category axis so there is no need to change its properties.
This code snippet shows how to ordinal/category x-axis in the IgcFinancialChartComponent and IgcDataChartComponent controls.
<igc-financial-chart x-axis-mode="Ordinal"></igc-financial-chart>
<igc-data-chart>
<igc-category-x-axis label="Time"></igc-category-x-axis>
</igc-data-chart>
Axis Intervals
By default, Web Components charts will automatically calculate yAxisInterval based on range of your data. Therefore, you should avoid setting axis interval especially to a small value to prevent rendering of too many of axis gridlines and axis labels. Also, you might want to consider increasing yAxisInterval property to a larger value than the automatically calculated axis interval if you do not need many axis gridlines or axis labels.
[!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 Web Components.
<igc-category-chart x-axis-interval="5" y-axis-interval="50"></igc-category-chart>
<igc-financial-chart x-axis-interval="5" y-axis-interval="50"></igc-financial-chart>
<igc-data-chart>
<igc-category-x-axis name="xAxis" interval="5"></igc-category-x-axis>
<igc-numeric-y-axis name="yAxis" interval="50"></igc-numeric-y-axis>
</igc-data-chart>
Axis Scale
Setting the yAxisIsLogarithmic property to false is recommended for higher performance, as fewer operations are needed than calculating axis range and values of axis labels in logarithmic scale.
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 Web Components.
<igc-category-chart x-axis-label-visibility="Collapsed" y-axis-label-visibility="Collapsed">
</igc-category-chart>
<igc-financial-chart x-axis-label-visibility="Collapsed" y-axis-label-visibility="Collapsed">
</igc-financial-chart>
<igc-data-chart>
<igc-category-x-axis name="xAxis" label-visibility="Collapsed"></igc-category-x-axis>
<igc-numeric-y-axis name="yAxis" label-visibility="Collapsed"></igc-numeric-y-axis>
</igc-data-chart>
Axis Labels Abbreviation
Although, the Web Components charts support abbreviation of large numbers (e.g. 10,000+) displayed in axis labels when yAxisAbbreviateLargeNumbers is set to true. We recommend, instead pre-processing large values in your data items by dividing them a common factor and then setting yAxisTitle to a string that represents factor used used to abbreviate your data values.
Este fragmento de código muestra cómo establecer el título del eje en los gráficos Web Components.
<igc-category-chart y-axis-title="In millions of Dollars"></igc-category-chart>
<igc-financial-chart y-axis-title="In millions of Dollars"></igc-financial-chart>
<igc-data-chart>
<igc-numeric-y-axis title="In millions of Dollars"></igc-numeric-y-axis>
</igc-data-chart>
Axis Labels Extent
En tiempo de ejecución, los gráficos de Web Components 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 Web Components.
<igc-category-chart x-axis-label-extent="50" y-axis-label-extent="50"></igc-category-chart>
<igc-financial-chart x-axis-label-extent="50" y-axis-label-extent="50"></igc-financial-chart>
<igc-data-chart>
<igc-category-x-axis name="xAxis" label-extent="50"></igc-category-x-axis>
<igc-numeric-y-axis name="yAxis" label-extent="50"></igc-numeric-y-axis>
</igc-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 Web Components.
For example, changing these properties on the IgcCategoryChartComponent or IgcFinancialChartComponent control:
| 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 |
Or changing properties of an IgcAxisComponent in the IgcDataChartComponent 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
In addition to above performance guidelines, the Web Components IgcFinancialChartComponent control has the following unique features that affect performance.
Y-Axis Mode
Setting the yAxisMode option to Numeric is recommended for higher performance, as fewer operations are needed than using PercentChange mode.
Chart Panes
Setting a lot of panes using indicatorTypes and overlayTypes options, might decrease performance and it is recommended to use a few financial indicators and one financial overlay.
Control deslizante de zoom
Setting the zoomSliderType option to None will improve chart performance and enable more vertical space for other indicators and the volume pane.
Volume Type
Setting the volumeType property can have the following impact on chart performance:
None- is the least expensive since it does not display the volume pane.Line- is more expensive volume type to render and it is recommended when rendering a lot of data points or when plotting a lot of data sources.Area- is more expensive to render than theLinevolume type.Column- is more expensive to render than theAreavolume type and it is recommended when rendering volume data of 1-3 stocks.
Performance in Data Chart
In addition to the general performance guidelines, the Web Components IgcDataChartComponent control has the following unique features that affect performance.
Axes Collection
Adding too many axis to the Axes collection of the IgcDataChartComponent control will decrease chart performance and we recommend Sharing Axes between series.
Series Collection
Also, adding a lot of series to the IgcSeriesComponent collection of the Web Components IgcDataChartComponent control will add overhead to rendering because each series has its own rendering canvas. This is especially important if you have more than 10 series in the Data Chart. We recommend combining multiple data sources into flatten data source (see Data Structure section) and then using conditional styling feature of the following series:
| Escenario de rendimiento más lento | Escenario más rápido con estilo condicional |
|---|---|
10+ deIgcLineSeriesComponent |
SolteroIgcScatterLineSeriesComponent |
20+ deIgcLineSeriesComponent |
SolteroIgcScatterPolylineSeriesComponent |
10+ deIgcScatterLineSeriesComponent |
SolteroIgcScatterPolylineSeriesComponent |
10+ deIgcPointSeriesComponent |
SolteroIgcScatterSeriesComponent |
20+ deIgcPointSeriesComponent |
SolteroIgcHighDensityScatterSeriesComponent |
20+ deIgcScatterSeriesComponent |
SolteroIgcHighDensityScatterSeriesComponent |
10+ deIgcAreaSeriesComponent |
SolteroIgcScatterPolygonSeriesComponent |
10+ deIgcColumnSeriesComponent |
SolteroIgcScatterPolygonSeriesComponent |
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: