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
No cenário de alta frequência, os gráficos de Angular 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 cintilação da tela e nenhum atraso visual, mesmo quando interagir com o gráfico em um dispositivo de toque. O exemplo a seguir demonstra o IgxCategoryChartComponent cenário em Alta Frequência.
Angular Chart with High-Volume
No cenário de alto volume, os gráficos de Angular podem renderizar 1 milhão de pontos de dados, enquanto o gráfico continua fornecendo um 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 IgxCategoryChartComponent 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 o uso de Angular IgxDataChartComponent com um dos seguintes tipos de séries, projetadas 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 Angular gráficos ofereçam suporte à renderização de várias fontes de dados vinculando a matriz de matrizes de pontos de dados à ItemsSource propriedade. É muito mais rápido para gráficos se várias fontes de dados forem niveladas 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();
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
IgxCategoryChartComponent Angular e os IgxFinancialChartComponent controles têm um adaptador de dados interno 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 filtrar apenas as colunas de dados que realmente deseja renderizar. Por exemplo
this.Chart.includedProperties = [ "Year", "USA", "RUS" ];
this.Chart.excludedProperties = [ "CHN", "FRN", "GER" ];
Chart Performance Guidelines
Chart Types
Tipos de gráfico mais simples, como Gráfico de Linhas, têm desempenho mais rápido do que usar o Gráfico de Spline devido à interpolação complexa de linhas de spline entre pontos de dados. Portanto, você deve usar chartType a propriedade de Angular IgxCategoryChartComponent ou o controle para selecionar o IgxFinancialChartComponent tipo de gráfico que renderiza mais rapidamente. Como alternativa, você pode alterar um tipo de série para uma série mais rápida no controle Angular IgxDataChartComponent.
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 a resolution propriedade como um valor mais alto melhorará o desempenho, mas diminuirá a fidelidade gráfica das linhas de séries plotadas. Como tal, pode ser aumentado 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 snippet de código mostra como o eixo x ordinal/categoria nos IgxFinancialChartComponent controles e IgxDataChartComponent.
<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 serão calculados yAxisInterval automaticamente com base no intervalo de 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 de eixo e rótulos de eixo. Além disso, talvez você queira considerar aumentar yAxisInterval a propriedade para um valor maior do que o intervalo de eixo calculado automaticamente se não precisar de muitas linhas de grade de eixo ou rótulos de eixo.
[!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 a propriedade como false é recomendado para maior desempenho, pois menos operações são necessárias do que calcular o yAxisIsLogarithmic intervalo de eixos e os valores dos rótulos de eixo na 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 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 como um fator comum e, em seguida, definindo yAxisTitle como uma cadeia de caracteres que representa o fator usado usado para abreviar seus valores de dados.
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, alterando essas propriedades no IgxCategoryChartComponent controle or 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 alterando as propriedades de um IgxAxisComponent no IgxDataChartComponent 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 Angular IgxFinancialChartComponent 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 indicatorTypes e overlayTypes opções pode diminuir o desempenho e é recomendável usar alguns indicadores financeiros e uma sobreposição financeira.
Controle deslizante de zoom
Definir a opção como None melhorará o desempenho do zoomSliderType gráfico e permitirá mais espaço vertical para outros indicadores e o painel de volume.
Volume Type
A configuração da volumeType propriedade 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 para 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 Angular IgxDataChartComponent tem os seguintes recursos exclusivos que afetam o desempenho.
Axes Collection
Adicionar muitos eixos à Axes coleção do controle diminuirá o IgxDataChartComponent desempenho do gráfico e recomendamos o compartilhamento de eixos entre as séries.
Series Collection
Além disso, adicionar muitas séries à IgxSeriesComponent coleção do controle Angular IgxDataChartComponent 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 Gráfico de Dados. Recomendamos combinar várias fontes de dados em uma fonte de dados planificada (consulte a seção Estrutura de Dados) e, em seguida, usar o recurso 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