Rendimiento de los gráficos de React
React 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 React gráficos funcionen lo más rápido posible en su aplicación.
React Chart Performance Examples
En los ejemplos siguientes se muestran dos escenarios de alto rendimiento de gráficos de React.
React Chart with High-Frequency
In High-Frequency scenario, the React 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 IgrCategoryChart in High-Frequency scenario.
React Chart with High-Volume
In High-Volume scenario, the React 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 IgrCategoryChart 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 React.
Data Size
If you need to plot data sources with large number of data points (e.g. 10,000+), we recommend using React IgrDataChart 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 React 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
React IgrCategoryChart and the IgrFinancialChart 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 React IgrCategoryChart or the IgrFinancialChart control to select type of chart that renders faster. Alternatively, you can change a type of series to a faster series in React IgrDataChart 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 React 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 React.
Resaltado de gráficos
Habilitar el resaltado del gráfico disminuirá ligeramente el rendimiento del gráfico React.
Chart Legend
Agregar una leyenda a los gráficos de React 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 React 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 React.
// 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 React.
// 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 React.
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 React.
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
IgrCategoryChartalready 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 IgrFinancialChart and IgrDataChart controls.
<IgrFinancialChart xAxisMode="Ordinal" />
<IgrDataChart>
<IgrCategoryXAxis label="Time" />
</IgrDataChart>
Axis Intervals
By default, React 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 React.
<IgrCategoryChart xAxisInterval={5} yAxisInterval={50}/>
<IgrFinancialChart xAxisInterval={5} yAxisInterval={50}/>
<IgrDataChart>
<IgrCategoryXAxis name="xAxis" interval={5} />
<IgrNumericYAxis name="yAxis" interval={50}/>
</IgrDataChart>
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 React.
<IgrCategoryChart xAxisLabelVisibility="Collapsed" yAxisLabelVisibility="Collapsed" />
<IgrFinancialChart xAxisLabelVisibility="Collapsed" yAxisLabelVisibility="Collapsed" />
<IgrDataChart>
<IgrCategoryXAxis name="xAxis" labelVisibility="Collapsed" />
<IgrNumericYAxis name="yAxis" labelVisibility="Collapsed" />
</IgrDataChart>
Axis Labels Abbreviation
Although, the React 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 React.
<IgrCategoryChart yAxisTitle="In millions of Dollars" />
<IgrFinancialChart yAxisTitle="In millions of Dollars" />
<IgrDataChart>
<IgrNumericYAxis title="In millions of Dollars" />
</IgrDataChart>
Axis Labels Extent
En tiempo de ejecución, los gráficos de React 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 React.
<IgrCategoryChart xAxisLabelExtent={50} yAxisLabelExtent={50}/>
<IgrFinancialChart xAxisLabelExtent={50} yAxisLabelExtent={50}/>
<IgrDataChart>
<IgrCategoryXAxis name="xAxis" labelExtent={50} />
<IgrNumericYAxis name="yAxis" labelExtent={50} />
</IgrDataChart>
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 React.
For example, changing these properties on the IgrCategoryChart or IgrFinancialChart 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 IgrAxis in the IgrDataChart 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 React IgrFinancialChart 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 React IgrDataChart control has the following unique features that affect performance.
Axes Collection
Adding too many axis to the Axes collection of the IgrDataChart control will decrease chart performance and we recommend Sharing Axes between series.
Series Collection
Also, adding a lot of series to the IgrSeries collection of the React IgrDataChart 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+ deIgrLineSeries |
SolteroIgrScatterLineSeries |
20+ deIgrLineSeries |
SolteroIgrScatterPolylineSeries |
10+ deIgrScatterLineSeries |
SolteroIgrScatterPolylineSeries |
10+ deIgrPointSeries |
SolteroIgrScatterSeries |
20+ deIgrPointSeries |
SolteroIgrHighDensityScatterSeries |
20+ deIgrScatterSeries |
SolteroIgrHighDensityScatterSeries |
10+ deIgrAreaSeries |
SolteroIgrScatterPolygonSeries |
10+ deIgrColumnSeries |
SolteroIgrScatterPolygonSeries |
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: