Desempenho Blazor Chart
Os gráficos Blazor são otimizados para alto desempenho de renderização de milhões de pontos de dados e atualização deles a cada poucos milissegundos. No entanto, há vários recursos de gráfico que afetam o desempenho do gráfico e eles devem ser considerados ao otimizar o desempenho em seu aplicativo. Este tópico o guiará para fazer os gráficos Blazor funcionarem o mais rápido possível em seu aplicativo.
Blazor Chart Performance Examples
Os exemplos a seguir demonstram dois cenários de alto desempenho de gráficos Blazor.
Blazor Chart with High-Frequency
No cenário de alta frequência, os gráficos Blazor podem renderizar itens de dados que estão sendo atualizados em tempo real ou em intervalos de milissegundos especificados. Você não experimentará nenhum atraso, nenhuma oscilação de tela e nenhum atraso visual, mesmo ao interagir com o gráfico em um dispositivo de toque. O exemplo a seguir demonstra o IgbCategoryChart no cenário de alta frequência.
Blazor Chart with High-Volume
No cenário de alto volume, os gráficos Blazor podem renderizar 1 milhão de pontos de dados enquanto o gráfico continua fornecendo desempenho suave quando os usuários finais tentam aumentar/diminuir o zoom ou navegar pelo conteúdo do gráfico. O exemplo a seguir demonstra o IgbCategoryChart no cenário de alto volume.
General Performance Guidelines
Esta seção lista diretrizes e recursos de gráfico que aumentam a sobrecarga e as atualizações de processamento nos gráficos Blazor.
Data Size
Se você precisar plotar fontes de dados com um grande número de pontos de dados (por exemplo, mais de 10.000), recomendamos usar Blazor IgbDataChart com um dos seguintes tipos de série, que foram projetados especialmente para essa finalidade.
- Gráfico HD de dispersão em vez de gráfico de pontos de categoria ou gráfico de marcadores de dispersão
- Gráfico de polilinhas de dispersão em vez de gráfico de linhas de categoria ou gráfico de linhas de dispersão
- Gráfico de polígonos de dispersão em vez de gráfico de área de categoria ou gráfico de colunas
Data Structure
Embora os gráficos Blazor suportem a renderização de várias fontes de dados vinculando uma matriz de matrizes de pontos de dados à propriedade DataSource. É muito mais rápido para gráficos se várias fontes de dados forem achatadas em uma única fonte de dados, onde cada item de dados contém várias colunas de dados em vez de apenas uma coluna de dados. Por exemplo:
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; }
}
}
Data Filtering
Os controles Blazor IgbCategoryChart e IgbFinancialChart têm um adaptador de dados integrado que analisa seus dados e gera séries de gráficos para você. No entanto, ele funciona mais rápido se você usar IncludedProperties e ExcludedProperties para filtrar apenas as colunas de dados que você realmente deseja renderizar. Por exemplo,
this.Chart.IncludedProperties = new string[] { "Year", "USA", "RUS" };
this.Chart.ExcludedProperties = new string[] { "CHN", "FRN", "GER" };
Chart Performance Guidelines
Chart Types
Tipos de gráficos mais simples, como Line Chart, têm desempenho mais rápido do que usar Spline Chart por causa da interpolação complexa de linhas spline entre pontos de dados. Portanto, você deve usar a propriedade ChartType do Blazor IgbCategoryChart ou o controle IgbFinancialChart para selecionar o tipo de gráfico que renderiza mais rápido. Como alternativa, você pode alterar um tipo de série para uma série mais rápida no controle Blazor IgbDataChart.
A tabela a seguir lista os tipos de gráfico em ordem, do desempenho mais rápido ao desempenho mais lento em cada grupo de gráficos:
* Observe que o Gráfico de Polígonos de Dispersão e o Gráfico de Polilinhas de Dispersão têm melhor desempenho do que o restante dos gráficos se você tiver muitas fontes de dados vinculadas ao gráfico. Para obter mais informações, consulte a seção Coleção de Séries. Caso contrário, outros tipos de gráfico são mais rápidos.
Animações de gráficos
Habilitar animações de gráfico atrasará um pouco a série de renderização final nos gráficos Blazor enquanto eles reproduzem animações de transição.
Anotações de gráficos
Habilitar anotações de gráfico, como anotações de chamada, anotações de retículo ou anotações de valor final, diminuirá um pouco o desempenho do gráfico Blazor.
Destaque de gráfico
Habilitar o Destaque de Gráfico diminuirá um pouco o desempenho do gráfico Blazor.
Chart Legend
Adicionar uma legenda aos gráficos Blazor pode diminuir o desempenho se os títulos das séries ou itens de dados mapeados para a legenda mudarem com frequência durante a execução.
Marcadores de gráfico
Em gráficos Blazor, os marcadores são especialmente caros quando se trata de desempenho de gráfico porque eles aumentam a complexidade do layout do gráfico e realizam vinculação de dados para obter certas informações. Além disso, os marcadores diminuem o desempenho quando há muitos pontos de dados ou se há muitas fontes de dados vinculadas. Portanto, se os marcadores não forem necessários, eles devem ser removidos do gráfico.
Este trecho de código mostra como remover marcadores dos gráficos Blazor.
// 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
Definir a propriedade Resolution para um valor mais alto melhorará o desempenho, mas diminuirá a fidelidade gráfica das linhas de séries plotadas. Como tal, ela pode ser aumentada até que a fidelidade seja inaceitável.
Este trecho de código mostra como diminuir a resolução nos gráficos Blazor.
// on CategoryChart or FinancialChart:
this.Chart.Resolution = 10;
this.Chart.Resolution = 10;
// on LineSeries of DataChart:
this.LineSeries.Resolution = 10;
Sobreposições de gráficos
Habilitar sobreposições de gráficos diminuirá um pouco o desempenho do gráfico Blazor.
Linhas de tendência do gráfico
Habilitar as linhas de tendência do gráfico diminuirá ligeiramente o desempenho do gráfico Blazor.
Tipos de eixo
O uso do eixo x com suporte a DateTime não é recomendado se os espaços entre os pontos de dados, com base na quantidade de intervalo de tempo entre eles, não forem importantes. Em vez disso, o eixo ordinal/categoria deve ser usado porque é mais eficiente na maneira como une os dados. Além disso, o eixo ordinal/categoria não executa nenhuma classificação nos dados como o eixo x baseado em tempo.
[!Note] The
IgbCategoryChartalready uses ordinal/category axis so there is no need to change its properties.
Este trecho de código mostra como usar o eixo x ordinal/categorial nos controles IgbFinancialChart e IgbDataChart.
<IgbFinancialChart XAxisMode="FinancialChartXAxisMode.Ordinal"/>
<IgbDataChart >
<IgbCategoryXAxis Label="Time" />
</IgbDataChart>
Axis Intervals
Por padrão, os gráficos Blazor calcularão automaticamente YAxisInterval com base no intervalo dos seus dados. Portanto, você deve evitar definir o intervalo do eixo especialmente para um valor pequeno para evitar a renderização de muitas linhas de grade e rótulos de eixo. Além disso, você pode querer considerar aumentar a propriedade YAxisInterval para um valor maior do que o intervalo do eixo calculado automaticamente se você não precisar de muitas linhas de grade ou rótulos de eixo.
[!Note] We do not recommend setting axis minor interval as it will decrease chart performance.
Este trecho de código mostra como definir o intervalo principal do eixo nos 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>
Axis Scale
É recomendável definir a propriedade YAxisIsLogarithmic como false para melhor desempenho, pois são necessárias menos operações do que calcular o intervalo do eixo e os valores dos rótulos do eixo em escala logarítmica.
Axis Labels Visibility
Da mesma forma que os marcadores, os rótulos de eixo também são caros porque usam modelos e associações e podem ter seu contexto de dados alterado com frequência. Se os rótulos não forem usados, eles devem ser ocultados ou seu intervalo deve ser aumentado para diminuir o número de rótulos de eixo.
Este trecho de código mostra como ocultar rótulos de eixo nos gráficos 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>
Axis Labels Abbreviation
Embora os gráficos Blazor suportem a abreviação de números grandes (por exemplo, 10.000+) exibidos em rótulos de eixo quando YAxisAbbreviateLargeNumbers é definido como true. Recomendamos, em vez disso, pré-processar valores grandes em seus itens de dados dividindo-os em um fator comum e, em seguida, definindo YAxisTitle como uma string que representa o fator usado para abreviar seus valores de dados.
Este trecho de código mostra como definir o título do eixo nos gráficos Blazor.
<IgbCategoryChart YAxisTitle="In millions of Dollars"/>
<IgbFinancialChart YAxisTitle="In millions of Dollars"/>
<IgbDataChart >
<IgbNumericYAxis Title="In millions of Dollars" />
</IgbDataChart>
Axis Labels Extent
No tempo de execução, os gráficos Blazor ajustam a extensão dos rótulos no eixo y com base em um rótulo com o valor mais longo. Isso pode diminuir o desempenho do gráfico se o intervalo de dados mudar e os rótulos precisarem ser atualizados com frequência. Portanto, é recomendável definir a extensão do rótulo no tempo de design para melhorar o desempenho do gráfico.
O trecho de código a seguir mostra como definir uma extensão fixa para rótulos no eixo y nos 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>
Axis Other Visuals
Habilitar visuais de eixo adicionais (por exemplo, títulos de eixo) ou alterar seus valores padrão pode diminuir o desempenho nos gráficos Blazor.
Por exemplo, alterando essas propriedades no controle IgbCategoryChart ou IgbFinancialChart:
| Eixo Visual | Propriedades do eixo X | Propriedades do eixo Y |
|---|---|---|
| Todos os Eixos Visual | XAxisIntervalXAxisMinorInterval |
YAxisIntervalYAxisMinorInterval |
| Marcas de seleção do eixo | XAxisTickStroke XAxisTickStrokeThicknessXAxisTickLength |
YAxisTickStroke YAxisTickStrokeThicknessYAxisTickLength |
| Linhas de grade principais do eixo | XAxisMajorStrokeXAxisMajorStrokeThickness |
YAxisMajorStrokeYAxisMajorStrokeThickness |
| Linhas de grade secundárias do eixo | XAxisMinorStrokeXAxisMinorStrokeThickness |
YAxisMinorStrokeYAxisMinorStrokeThickness |
| Linha principal do eixo | XAxisStrokeXAxisStrokeThickness |
YAxisStrokeYAxisStrokeThickness |
| Títulos do Eixo | XAxisTitleXAxisTitleAngle |
YAxisTitleYAxisTitleAngle |
| Tiras de eixo | XAxisStrip |
YAxisStrip |
Ou alterando propriedades de um IgbAxis no controle IgbDataChart:
| Eixo Visual | Propriedades do eixo |
|---|---|
| Todos os visuais do eixo | Interval, MinorInterval |
| Marcas de seleção do eixo | TickStroke , TickStrokeThickness, TickLength |
| Linhas de grade principais do eixo | MajorStroke, MajorStrokeThickness |
| Linhas de grade secundárias do eixo | MinorStroke, MinorStrokeThickness |
| Linha principal do eixo | Stroke, StrokeThickness |
| Títulos do Eixo | ChartTitle, TitleAngle |
| Tiras de eixo | Strip |
Performance in Financial Chart
Além das diretrizes de desempenho acima, o controle Blazor IgbFinancialChart tem os seguintes recursos exclusivos que afetam o desempenho.
Y-Axis Mode
Definir o YAxisMode opção para Numeric é recomendado para maior desempenho, pois menos operações são necessárias do que usar PercentChange modo.
Chart Panes
Definir muitos painéis usando as opções IndicatorTypes e OverlayTypes pode diminuir o desempenho e é recomendável usar alguns indicadores financeiros e uma sobreposição financeira.
Zoom Slider
Definir a opção ZoomSliderType como None melhorará o desempenho do gráfico e permitirá mais espaço vertical para outros indicadores e o painel de volume.
Volume Type
Definir a propriedade VolumeType pode ter o seguinte impacto no desempenho do gráfico:
None- é o mais barato, pois não exibe o painel de volume.Line- é um tipo de volume mais caro para renderizar e é recomendado ao renderizar muitos pontos de dados ou ao plotar muitas fontes de dados.Area- é mais caro renderizar do que o tipo de volumeLine.IgbColumn- é mais caro para renderizar do que o tipo de volumeAreae é recomendado ao renderizar dados de volume de 1 a 3 ações.
Performance in Data Chart
Além das diretrizes gerais de desempenho, o controle Blazor IgbDataChart tem os seguintes recursos exclusivos que afetam o desempenho.
Axes Collection
Adicionar muitos eixos à coleção Axes do controle IgbDataChart diminuirá o desempenho do gráfico e recomendamos compartilhar eixos entre séries.
Series Collection
Além disso, adicionar muitas séries à coleção Series do controle Blazor IgbDataChart adicionará sobrecarga à renderização porque cada série tem sua própria tela de renderização. Isso é especialmente importante se você tiver mais de 10 séries no Data Chart. Recomendamos combinar várias fontes de dados em uma fonte de dados nivelada (consulte a seção Estrutura de Dados) e, em seguida, usar o recurso de estilo condicional das seguintes séries:
| Cenário de desempenho mais lento | Cenário mais rápido com estilo condicional |
|---|---|
10+ deIgbLineSeries |
ÚnicoIgbScatterLineSeries |
20+ deIgbLineSeries |
ÚnicoIgbScatterPolylineSeries |
10+ deIgbScatterLineSeries |
ÚnicoIgbScatterPolylineSeries |
10+ deIgbPointSeries |
ÚnicoIgbScatterSeries |
20+ deIgbPointSeries |
ÚnicoIgbHighDensityScatterSeries |
20+ deIgbScatterSeries |
ÚnicoIgbHighDensityScatterSeries |
10+ deIgbAreaSeries |
ÚnicoIgbScatterPolygonSeries |
10+ deIgbColumnSeries |
ÚnicoIgbScatterPolygonSeries |
Additional Resources
Você pode encontrar mais informações sobre os tipos de gráficos relacionados nestes tópicos:
- Gráfico de área
- Gráfico de barras
- Gráfico de bolhas
- Gráfico de colunas
- Gráfico de rosca
- Gráfico de pizza
- Gráfico de pontos
- Gráfico Polar
- Gráfico Radial
- Tabela de formas
- Gráfico de spline
- Gráfico de dispersão
- Gráfico empilhado
- Gráfico de etapas
- Gráfico de ações
- Animações de gráficos
- Anotações de gráficos
- Destaque de gráfico
- Marcadores de gráfico
- Sobreposições de gráficos
- Linhas de tendência do gráfico
API References
A tabela a seguir lista os membros da API mencionados nas seções acima: