Desempenho do gráfico Angular
Angular gráficos são otimizados para alto desempenho de renderização de milhões de pontos de dados e atualização a cada poucos milissegundos. No entanto, há vários recursos de gráfico que afetam o desempenho do gráfico e devem ser considerados ao otimizar o desempenho em seu aplicativo. Este tópico irá guiá-lo para fazer com que Angular gráficos funcionem o mais rápido possível em seu aplicativo.
Angular Chart Performance Examples
Os exemplos a seguir demonstram dois cenários de alto desempenho de gráficos Angular.
Angular Chart with High-Frequency
Em cenários de alta frequência, os gráficos Angular 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 oIgxCategoryChartComponent cenário de alta frequência.
Angular Chart with High-Volume
Em cenários de alto volume, os gráficos Angular 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 oIgxCategoryChartComponent cenário em Alto Volume.
General Performance Guidelines
Esta seção lista diretrizes e recursos de gráfico que aumentam a sobrecarga e o processamento de atualizações nos gráficos Angular.
Data Size
Se você precisar plotar fontes de dados com um grande número de pontos de dados (por exemplo, 10.000+), recomendamos usar AngularIgxDataChartComponent 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 Angular 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
AngularIgxCategoryChartComponent e osIgxFinancialChartComponent 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 AngularIgxCategoryChartComponent ou oIgxFinancialChartComponent 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 AngularIgxDataChartComponent.
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
Ativar as animações de gráfico atrasará um pouco a série de renderização final nos gráficos Angular enquanto eles reproduzem animações de transição.
Anotações de gráficos
Ativar as Anotações do Gráfico, como as Anotações de Texto Explicativo, Anotações de Mira ou Anotações de Valor Final, diminuirá ligeiramente o desempenho do gráfico Angular.
Destaque de gráfico
Ativar o realce do gráfico diminuirá ligeiramente o desempenho do gráfico Angular.
Chart Legend
Adicionar uma legenda aos gráficos Angular pode diminuir o desempenho se os títulos de séries ou itens de dados mapeados para legenda estiverem mudando com frequência em tempo de execução.
Marcadores de gráfico
Em Angular gráficos, os marcadores são especialmente caros quando se trata de desempenho do gráfico porque aumentam a complexidade do layout do gráfico e executam a vinculação de dados para obter determinadas informações. Além disso, os marcadores diminuem o desempenho quando há muitos pontos de dados ou se há muitas fontes de dados associadas. Portanto, se os marcadores não forem necessários, eles devem ser removidos do gráfico.
Este snippet de código mostra como remover marcadores dos gráficos Angular.
// 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 snippet de código mostra como diminuir a resolução nos gráficos Angular.
// on CategoryChart or FinancialChart:
this.Chart.Resolution = 10;
// on LineSeries of DataChart:
this.LineSeries.Resolution = 10;
Sobreposições de gráficos
Ativar as sobreposições de gráfico diminuirá ligeiramente o desempenho do gráfico Angular.
Linhas de tendência do gráfico
Ativar as linhas de tendência do gráfico diminuirá ligeiramente o desempenho do gráfico Angular.
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
IgxCategoryChartComponentalready 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 nosIgxFinancialChartComponent controles eIgxDataChartComponent.
<igx-financial-chart xAxisMode="Ordinal"></igx-financial-chart>
<igx-data-chart>
<igx-category-x-axis label="Time"></igx-category-x-axis>
</igx-data-chart>
Axis Intervals
Por padrão, Angular 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 snippet de código mostra como definir o intervalo principal do eixo nos gráficos Angular.
<igx-category-chart xAxisInterval="5" yAxisInterval="50"></igx-category-chart>
<igx-financial-chart xAxisInterval="5" yAxisInterval="50"></igx-financial-chart>
<igx-data-chart>
<igx-category-x-axis name="xAxis" interval="5"></igx-category-x-axis>
<igx-numeric-y-axis name="yAxis" interval="50"></igx-numeric-y-axis>
</igx-data-chart>
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 snippet de código mostra como ocultar rótulos de eixo nos gráficos Angular.
<igx-category-chart xAxisLabelVisibility="Collapsed" yAxisLabelVisibility="Collapsed">
</igx-category-chart>
<igx-financial-chart xAxisLabelVisibility="Collapsed" yAxisLabelVisibility="Collapsed">
</igx-financial-chart>
<igx-data-chart>
<igx-category-x-axis name="xAxis" labelVisibility="Collapsed"></igx-category-x-axis>
<igx-numeric-y-axis name="yAxis" labelVisibility="Collapsed"></igx-numeric-y-axis>
</igx-data-chart>
Axis Labels Abbreviation
Embora os gráficos Angular 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 snippet de código mostra como definir o título do eixo nos gráficos Angular.
<igx-category-chart yAxisTitle="In millions of Dollars"></igx-category-chart>
<igx-financial-chart yAxisTitle="In millions of Dollars"></igx-financial-chart>
<igx-data-chart>
<igx-numeric-y-axis title="In millions of Dollars"></igx-numeric-y-axis>
</igx-data-chart>
Axis Labels Extent
No tempo de execução, os gráficos Angular 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 alterações de dados e rótulos precisar ser atualizado com frequência. Portanto, é recomendável definir a extensão do rótulo em tempo de design para melhorar o desempenho do gráfico.
O snippet de código a seguir mostra como definir uma extensão fixa para rótulos no eixo y nos gráficos Angular.
<igx-category-chart xAxisLabelExtent="50" yAxisLabelExtent="50"></igx-category-chart>
<igx-financial-chart xAxisLabelExtent="50" yAxisLabelExtent="50"></igx-financial-chart>
<igx-data-chart>
<igx-category-x-axis name="xAxis" labelExtent="50"></igx-category-x-axis>
<igx-numeric-y-axis name="yAxis" labelExtent="50"></igx-numeric-y-axis>
</igx-data-chart>
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 Angular.
Por exemplo, mudando essas propriedades noIgxCategoryChartComponent controle ou:IgxFinancialChartComponent
| 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 umIgxAxisComponent noIgxDataChartComponent 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 AngularIgxFinancialChartComponent 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 AngularIgxDataChartComponent possui as seguintes características únicas que afetam o desempenho.
Axes Collection
Adicionar muitos eixos àAxes coleção de controlesIgxDataChartComponent diminuirá o desempenho nas paradas e recomendamos o compartilhamento de eixos entre séries.
Series Collection
Além disso, adicionar muitas séries àIgxSeriesComponent coleção do controle AngularIgxDataChartComponent 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+ deIgxLineSeriesComponent |
ÚnicoIgxScatterLineSeriesComponent |
20+ deIgxLineSeriesComponent |
ÚnicoIgxScatterPolylineSeriesComponent |
10+ deIgxScatterLineSeriesComponent |
ÚnicoIgxScatterPolylineSeriesComponent |
10+ deIgxPointSeriesComponent |
ÚnicoIgxScatterSeriesComponent |
20+ deIgxPointSeriesComponent |
ÚnicoIgxHighDensityScatterSeriesComponent |
20+ deIgxScatterSeriesComponent |
ÚnicoIgxHighDensityScatterSeriesComponent |
10+ deIgxAreaSeriesComponent |
ÚnicoIgxScatterPolygonSeriesComponent |
10+ deIgxColumnSeriesComponent |
ÚnicoIgxScatterPolygonSeriesComponent |
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:
resolutionindicatorTypesoverlayTypesvolumeTypezoomSliderTypexAxisModeyAxisModexAxisIntervalyAxisIntervalxAxisMinorIntervalyAxisMinorIntervalxAxisLabelVisibilityyAxisLabelVisibilityyAxisIsLogarithmic
GitHub