Rendimiento del gráfico Blazor
Los gráficos Blazor están optimizados para un alto rendimiento en la representación de millones de puntos de datos y su actualización cada pocos milisegundos. Sin embargo, existen varias características de los gráficos que afectan el rendimiento del gráfico y que se deben tener en cuenta al optimizar el rendimiento de su aplicación. Este tema le servirá de guía para que los gráficos Blazor funcionen lo más rápido posible en su aplicación.
Ejemplos de rendimiento de gráficos de Blazor
Los siguientes ejemplos demuestran dos escenarios de alto rendimiento de gráficos Blazor.
Gráfico de Blazor con alta frecuencia
En un escenario de alta frecuencia, los gráficos Blazor pueden representar elementos de datos que se actualizan en tiempo real o en intervalos de milisegundos específicos. No experimentará demoras, parpadeos en la pantalla ni retrasos visuales, incluso cuando interactúe con el gráfico en un dispositivo táctil. El siguiente ejemplo muestra el IgbCategoryChart
en un escenario de alta frecuencia.
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Gráfico de Blazor con alto volumen
En un escenario de gran volumen, los gráficos de Blazor pueden representar 1 millón de puntos de datos, mientras que el gráfico sigue proporcionando un rendimiento fluido cuando los usuarios finales intentan acercar o alejar o navegar por el contenido del gráfico. En el ejemplo siguiente se muestra el IgbCategoryChart
escenario de alto volumen.
Pautas generales de desempeño
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 Blazor.
Tamaño de datos
Si necesita trazar fuentes de datos con un gran número de puntos de datos (por ejemplo, 10,000+), le recomendamos que utilice Blazor IgbDataChart
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
Estructura de datos
Aunque Blazor gráficos admiten la representación de varios orígenes de datos mediante el enlace de matrices de matrices de puntos de datos a la DataSource
propiedad. Es mucho más rápido para los gráficos si varias fuentes de datos se acoplan 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();
public static class FlattenDataSource
{
public static List<FlattenDataItem> Create() {
var data = new List<FlattenDataItem>() {
new FlattenDataItem { Year = "1996", USA = 148, CHN = 110 },
new FlattenDataItem { Year = "2000", USA = 142, CHN = 115 },
};
return data;
}
public class FlattenDataItem
{
public int USA { get; set; }
public int CHN { get; set; }
public int Year { get; set; }
}
}
// instead of this data structure:
public static class MultiDataSources
{
public static List<MultiDataItem> Create() {
var dataSource1 = new List<MultiDataItem>() {
new MultiDataItem { Year = "1996", Value = 148 },
new MultiDataItem { Year = "2000", Value = 142 },
};
var dataSource2 = new List<MultiDataItem>() {
new MultiDataItem { Year = "1996", Value = 110 },
new MultiDataItem { Year = "2000", Value = 115 },
};
var multipleSources = new List<List<MultiDataItem>>();
multipleSources.Add(dataSource1);
multipleSources.Add(dataSource2);
return multipleSources;
}
public class MultiDataItem
{
public int Value { get; set; }
public int Year { get; set; }
}
}
razor
Filtrado de datos
IgbCategoryChart
Blazor y los IgbFinancialChart
controles tienen un adaptador de datos integrado que analiza sus datos y genera series de gráficos para usted. Sin embargo, funciona más rápido si usa IncludedProperties
y ExcludedProperties
para filtrar solo las columnas de datos que realmente desea representar. Por ejemplo
this.Chart.IncludedProperties = new string[] { "Year", "USA", "RUS" };
this.Chart.ExcludedProperties = new string[] { "CHN", "FRN", "GER" };
razor
Directrices de rendimiento del gráfico
Tipos de gráficos
Los tipos de gráficos más simples, como Gráfico de líneas tienen un rendimiento más rápido que el uso de Gráfico Spline debido a la compleja interpolación de líneas spline entre puntos de datos. Por lo tanto, debe usar ChartType
la propiedad de Blazor IgbCategoryChart
o el control para seleccionar el IgbFinancialChart
tipo de gráfico que se representa más rápido. Como alternativa, puede cambiar un tipo de serie a una serie más rápida en Blazor IgbDataChart
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 Blazor 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 Blazor.
Resaltado de gráfico
Habilitar el resaltado del gráfico disminuirá ligeramente el rendimiento del gráfico Blazor.
Leyenda del gráfico
Agregar una leyenda a los gráficos de Blazor 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 Blazor 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 Blazor.
// on CategoryChart or FinancialChart
this.Chart.MarkerTypes.Clear();
this.Chart.MarkerTypes.Add(MarkerType.None);
// on LineSeries of DataChart
this.LineSeries.MarkerType = MarkerType.None;
razor
Resolución del gráfico
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 Blazor.
// on CategoryChart or FinancialChart:
this.Chart.Resolution = 10;
this.Chart.Resolution = 10;
// on LineSeries of DataChart:
this.LineSeries.Resolution = 10;
razor
Superposiciones de gráficos
La habilitación de las superposiciones de gráficos disminuirá ligeramente el rendimiento del gráfico Blazor.
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 Blazor.
Tipos de eje
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.
IgbCategoryChart ya utiliza el eje ordinal/categoría, por lo que no es necesario cambiar sus propiedades.
Este fragmento de código muestra cómo ordinal/categoría el eje x en los controles IgbFinancialChart
e IgbDataChart
.
<IgbFinancialChart XAxisMode="FinancialChartXAxisMode.Ordinal"/>
<IgbDataChart >
<IgbCategoryXAxis Label="Time" />
</IgbDataChart>
razor
Intervalos de eje
De forma predeterminada, Blazor gráficos se calcularán YAxisInterval
automáticamente en función del 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 de ejes y etiquetas de ejes. Además, es posible que desee considerar la posibilidad de aumentar YAxisInterval
la propiedad a un valor mayor que el intervalo de eje calculado automáticamente si no necesita muchas líneas de cuadrícula de eje o etiquetas de eje.
No recomendamos configurar el intervalo menor del eje, ya que disminuirá el rendimiento del gráfico.
Este fragmento de código muestra cómo establecer el intervalo principal del eje en los gráficos Blazor.
<IgbCategoryChart XAxisInterval="5" YAxisInterval="50"/>
<IgbFinancialChart XAxisInterval="5" YAxisInterval="50"/>
<IgbDataChart >
<IgbCategoryXAxis Name="xAxis" Interval="5" />
<IgbNumericYAxis Name="yAxis" Interval="50" />
</IgbDataChart>
razor
Escala de eje
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.
Visibilidad de etiquetas de eje
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 Blazor.
<IgbCategoryChart
XAxisLabelVisibility="Visibility.Collapsed"
YAxisLabelVisibility="Visibility.Collapsed">
</IgbCategoryChart>
<IgbFinancialChart
XAxisLabelVisibility="Visibility.Collapsed"
YAxisLabelVisibility="Visibility.Collapsed">
</IgbFinancialChart>
<IgbDataChart>
<IgbCategoryXAxis Name="xAxis" LabelVisibility="Visibility.Collapsed" />
<IgbNumericYAxis Name="yAxis" LabelVisibility="Visibility.Collapsed" />
</IgbDataChart>
razor
Abreviatura de etiquetas de eje
Sin embargo, los gráficos de Blazor admiten la abreviatura de números grandes (por ejemplo, 10,000+) que se muestran en las etiquetas de los ejes cuando YAxisAbbreviateLargeNumbers
se establece en true. En su lugar, se recomienda preprocesar valores grandes en los elementos de datos dividiéndolos como un factor común y, a continuación, estableciéndolos YAxisTitle
en una cadena que represente el factor utilizado para abreviar los valores de datos.
Este fragmento de código muestra cómo establecer el título del eje en los gráficos Blazor.
<IgbCategoryChart YAxisTitle="In millions of Dollars"/>
<IgbFinancialChart YAxisTitle="In millions of Dollars"/>
<IgbDataChart >
<IgbNumericYAxis Title="In millions of Dollars" />
</IgbDataChart>
razor
Extensión de etiquetas de eje
En tiempo de ejecución, los gráficos de Blazor 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 Blazor.
<IgbCategoryChart XAxisLabelExtent="50" YAxisLabelExtent="50"/>
<IgbFinancialChart XAxisLabelExtent="50" YAxisLabelExtent="50"/>
<IgbDataChart>
<IgbCategoryXAxis Name="xAxis" LabelExtent="50" />
<IgbNumericYAxis Name="yAxis" LabelExtent="50" />
</IgbDataChart>
razor
Eje Otras imágenes
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 Blazor.
Por ejemplo, cambiando estas propiedades en el control IgbCategoryChart
o IgbFinancialChart
:
eje visual | Propiedades del eje X | Propiedades del eje Y |
---|---|---|
Todos los ejes visuales | XAxisInterval XAxisMinorInterval |
YAxisInterval YAxisMinorInterval |
Marcas de eje | XAxisTickStroke XAxisTickStrokeThickness XAxisTickLength |
YAxisTickStroke YAxisTickStrokeThickness YAxisTickLength |
Líneas de cuadrícula principales del eje | XAxisMajorStroke XAxisMajorStrokeThickness |
YAxisMajorStroke YAxisMajorStrokeThickness |
Líneas de cuadrícula del eje menor | XAxisMinorStroke XAxisMinorStrokeThickness |
YAxisMinorStroke YAxisMinorStrokeThickness |
Línea principal del eje | XAxisStroke XAxisStrokeThickness |
YAxisStroke YAxisStrokeThickness |
Títulos de eje | XAxisTitle XAxisTitleAngle |
YAxisTitle YAxisTitleAngle |
Tiras de eje | XAxisStrip |
YAxisStrip |
O cambiando las propiedades de un IgbAxis
en el control IgbDataChart
:
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 |
Desempeño en Gráfico financiero
Además de las directrices de rendimiento anteriores, el control Blazor IgbFinancialChart
tiene las siguientes características únicas que afectan al rendimiento.
Modo de eje Y
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
.
Paneles de gráficos
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.
Tipo de volumen
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
.IgbColumn
: es más costoso de renderizar que el tipo de volumenArea
y se recomienda al renderizar datos de volumen de 1 a 3 stocks.
Rendimiento en Gráfico de datos
Además de las directrices generales de rendimiento, el control Blazor IgbDataChart
tiene las siguientes características únicas que afectan al rendimiento.
Colección de ejes
Agregar demasiados ejes a la colección Axes
del control IgbDataChart
disminuirá el rendimiento del gráfico y recomendamos compartir ejes entre series.
Colección de series
Además, agregar una gran cantidad de series a la colección del control Blazor IgbDataChart
agregará sobrecarga a la Series
representación, ya que cada serie tiene su propio lienzo de representación. Esto es especialmente importante si tiene más de 10 series en el Gráfico de datos. Se recomienda combinar varias fuentes de datos en una fuente de datos plana (consulte la sección Estructura de datos) y, a continuación, utilizar 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+ deIgbLineSeries |
SolteroIgbScatterLineSeries |
20+ deIgbLineSeries |
SolteroIgbScatterPolylineSeries |
10+ deIgbScatterLineSeries |
SolteroIgbScatterPolylineSeries |
10+ deIgbPointSeries |
SolteroIgbScatterSeries |
20+ deIgbPointSeries |
SolteroIgbHighDensityScatterSeries |
20+ deIgbScatterSeries |
SolteroIgbHighDensityScatterSeries |
10+ deIgbAreaSeries |
SolteroIgbScatterPolygonSeries |
10+ deIgbColumnSeries |
SolteroIgbScatterPolygonSeries |
Recursos adicionales
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
Referencias de API
La siguiente tabla enumera los miembros de API mencionados en las secciones anteriores: