Desempenho do gráfico React
Os gráficos React 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 React funcionarem o mais rápido possível em seu aplicativo.
React Chart Performance Examples
Os exemplos a seguir demonstram dois cenários de alto desempenho de gráficos React.
React Chart with High-Frequency
Em cenários de alta frequência, os gráficos React podem renderizar itens de dados que estão sendo atualizados em tempo real ou em intervalos de milissegundos especificados. Você não vai sentir atraso, nem piscar na tela, nem atrasos visuais, mesmo ao interagir com o gráfico em um dispositivo sensível ao toque. A amostra a seguir demonstra oIgrCategoryChart cenário de alta frequência.
React Chart with High-Volume
Em cenários de alto volume, os gráficos React podem renderizar 1 milhão de pontos de dados enquanto o gráfico continua oferecendo desempenho suave quando os usuários finais tentam dar zoom in/out ou navegar pelo conteúdo do gráfico. O exemplo a seguir demonstra oIgrCategoryChart cenário em Alto Volume.
General Performance Guidelines
Esta seção lista diretrizes e recursos de gráfico que aumentam a sobrecarga e processam atualizações nos gráficos React.
Data Size
Se você precisar plotar fontes de dados com um grande número de pontos de dados (por exemplo, 10.000+), recomendamos usar ReactIgrDataChart com um dos seguintes tipos de séries, que foram projetadas especialmente para esse propósito.
- 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 React gráficos suportem a renderização de múltiplas fontes de dados vinculando um array de arrays de pontos de dados àItemsSource propriedade. É muito mais rápido para gráficos se múltiplas fontes de dados forem agrupadas em uma única fonte de dados, onde cada item contém múltiplas colunas de dados em vez de apenas uma coluna. Por exemplo:
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
ReactIgrCategoryChart e osIgrFinancialChart controles têm um adaptador de dados embutido que analisa seus dados e gera séries de gráficos para você. No entanto, funciona mais rápido se você usarincludedProperties eexcludedProperties filtrar apenas as colunas de dados que realmente quer renderizar. Por exemplo,
this.Chart.includedProperties = [ "Year", "USA", "RUS" ];
this.Chart.excludedProperties = [ "CHN", "FRN", "GER" ];
Chart Performance Guidelines
Chart Types
Tipos de gráficos mais simples, como o Line Chart, têm desempenho mais rápido do que o uso do Spline Chart devido à complexa interpolação de spline entre pontos de dados. Portanto, você deve usarchartType a propriedade de ReactIgrCategoryChart ou oIgrFinancialChart controle para selecionar o tipo de gráfico que renderiza mais rápido. Alternativamente, você pode mudar um tipo de série para uma série mais rápida no controle ReactIgrDataChart.
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 React 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 React.
Destaque de gráfico
Habilitar o Destaque de Gráfico diminuirá um pouco o desempenho do gráfico React.
Chart Legend
Adicionar uma legenda aos gráficos React 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 React, 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 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
Definir aresolution propriedade para um valor maior melhora o desempenho, mas reduz a fidelidade gráfica das linhas das séries plotadas. Assim, pode ser aumentada até que a fidelidade seja inaceitável.
Este trecho de código mostra como diminuir a resolução nos gráficos React.
// on CategoryChart or FinancialChart:
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 React.
Linhas de tendência do gráfico
Habilitar as linhas de tendência do gráfico diminuirá um pouco o desempenho do gráfico React.
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
IgrCategoryChartalready uses ordinal/category axis so there is no need to change its properties.
Este trecho de código mostra como ordenar/categorizar o eixo x nosIgrFinancialChart controles eIgrDataChart.
<IgrFinancialChart xAxisMode="Ordinal" />
<IgrDataChart>
<IgrCategoryXAxis label="Time" />
</IgrDataChart>
Axis Intervals
Por padrão, React gráficos calculamyAxisInterval automaticamente com base na faixa dos seus dados. Portanto, você deve evitar definir intervalo de eixo, especialmente para um valor pequeno, para evitar renderização de muitas linhas de grade e rótulos de eixos. Além disso, você pode considerar aumentaryAxisInterval a propriedade para um valor maior do que o intervalo de eixos calculado automaticamente se não precisar de muitas linhas de grade de eixo ou rótulos de eixos.
[!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 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
Definir ayAxisIsLogarithmic propriedade como false é recomendado para maior desempenho, pois são necessárias menos operações do que calcular a faixa e os valores dos rótulos dos eixos 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 eixos nos gráficos 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
Embora os gráficos React suportem a abreviação de números grandes (por exemplo, 10.000+) exibidos em rótulos de eixo quandoyAxisAbbreviateLargeNumbers está definido como verdadeiro. Recomendamos que, em vez disso, pré-processe valores grandes nos seus itens de dados dividindo-os em um fator comum e depois definayAxisTitle uma string que represente o fator usado para abreviar seus valores.
Este trecho de código mostra como definir o título do eixo nos 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
No tempo de execução, os gráficos React 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 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
Habilitar visuais de eixo adicionais (por exemplo, títulos de eixo) ou alterar seus valores padrão pode diminuir o desempenho nos gráficos React.
Por exemplo, mudando essas propriedades noIgrCategoryChart controle ou:IgrFinancialChart
| 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 alterar propriedades de umIgrAxis noIgrDataChart controle:
| 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 ReactIgrFinancialChart possui as seguintes características únicas que afetam o desempenho.
Y-Axis Mode
A opçãoyAxisModeNumeric para é recomendada para maior desempenho, pois menos operações são necessárias do que usandoPercentChange o modo.
Chart Panes
Configurar muitos painéisindicatorTypes eoverlayTypes opções pode diminuir o desempenho, e recomenda-se usar alguns indicadores financeiros e uma sobreposição financeira.
Controle deslizante de zoom
Configurar azoomSliderType opção paraNone melhora o desempenho do gráfico e permite mais espaço vertical para outros indicadores e o painel de volume.
Volume Type
Definir ovolumeType imóvel pode ter o seguinte impacto no desempenho dos gráficos:
None- é o menos caro, 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 de renderizar do que oLinetipo de volume.Column- é mais caro de renderizar do que oAreatipo de volume e é 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 ReactIgrDataChart possui as seguintes características únicas que afetam o desempenho.
Axes Collection
Adicionar muitos eixos àAxes coleção de controlesIgrDataChart diminuirá o desempenho nas paradas e recomendamos o compartilhamento de eixos entre séries.
Series Collection
Além disso, adicionar muitas séries àIgrSeries coleção do controle ReactIgrDataChart vai aumentar a carga na 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 Gráfico de Dados. Recomendamos combinar múltiplas fontes de dados em uma fonte de dados achatada (veja a seção Estrutura de Dados) e então usar a característica de estilo condicional da seguinte série:
| Cenário de desempenho mais lento | Cenário mais rápido com estilo condicional |
|---|---|
10+ deIgrLineSeries |
ÚnicoIgrScatterLineSeries |
20+ deIgrLineSeries |
ÚnicoIgrScatterPolylineSeries |
10+ deIgrScatterLineSeries |
ÚnicoIgrScatterPolylineSeries |
10+ deIgrPointSeries |
ÚnicoIgrScatterSeries |
20+ deIgrPointSeries |
ÚnicoIgrHighDensityScatterSeries |
20+ deIgrScatterSeries |
ÚnicoIgrHighDensityScatterSeries |
10+ deIgrAreaSeries |
ÚnicoIgrScatterPolygonSeries |
10+ deIgrColumnSeries |
ÚnicoIgrScatterPolygonSeries |
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: