Desempenho do gráfico de Web Components
Os gráficos de Web Components 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 de Web Components funcionarem o mais rápido possível em seu aplicativo.
Web Components Chart Performance Examples
Os exemplos a seguir demonstram dois cenários de alto desempenho de gráficos de Web Components.
Web Components Chart with High-Frequency
No cenário de alta frequência, os Web Components Charts 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 IgcCategoryChartComponent no cenário de alta frequência.
Web Components Chart with High-Volume
No cenário de Alto Volume, os Web Components Charts 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 IgcCategoryChartComponent 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 Web Components.
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 Web Components IgcDataChartComponent 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 Web Components suportem a renderização de várias fontes de dados vinculando uma matriz de matrizes de pontos de dados à propriedade ItemsSource. É 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();
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
Web Components IgcCategoryChartComponent e os controles IgcFinancialChartComponent 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 = [ "Year", "USA", "RUS" ];
this.Chart.excludedProperties = [ "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 Web Components IgcCategoryChartComponent ou o controle IgcFinancialChartComponent 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 Web Components IgcDataChartComponent.
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 renderização final das séries nos gráficos Web Components 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á ligeiramente o desempenho do gráfico Web Components.
Destaque de gráfico
Habilitar o Destaque do Gráfico diminuirá ligeiramente o desempenho do gráfico dos Web Components.
Chart Legend
Adicionar uma legenda aos gráficos dos Web Components 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 de Web Components, 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 do Web Components.
// 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 trecho de código mostra como diminuir a resolução nos gráficos Web Components.
// 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á ligeiramente o desempenho do gráfico Web Components.
Linhas de tendência do gráfico
Habilitar as linhas de tendência do gráfico diminuirá ligeiramente o desempenho do gráfico dos Web Components.
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
IgcCategoryChartComponentalready uses ordinal/category axis so there is no need to change its properties.
Este trecho de código mostra como ordinal/categoria do eixo x nos controles IgcFinancialChartComponent e IgcDataChartComponent.
<igc-financial-chart x-axis-mode="Ordinal"></igc-financial-chart>
<igc-data-chart>
<igc-category-x-axis label="Time"></igc-category-x-axis>
</igc-data-chart>
Axis Intervals
Por padrão, os gráficos Web Components 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 Web Components.
<igc-category-chart x-axis-interval="5" y-axis-interval="50"></igc-category-chart>
<igc-financial-chart x-axis-interval="5" y-axis-interval="50"></igc-financial-chart>
<igc-data-chart>
<igc-category-x-axis name="xAxis" interval="5"></igc-category-x-axis>
<igc-numeric-y-axis name="yAxis" interval="50"></igc-numeric-y-axis>
</igc-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 trecho de código mostra como ocultar rótulos de eixo nos gráficos Web Components.
<igc-category-chart x-axis-label-visibility="Collapsed" y-axis-label-visibility="Collapsed">
</igc-category-chart>
<igc-financial-chart x-axis-label-visibility="Collapsed" y-axis-label-visibility="Collapsed">
</igc-financial-chart>
<igc-data-chart>
<igc-category-x-axis name="xAxis" label-visibility="Collapsed"></igc-category-x-axis>
<igc-numeric-y-axis name="yAxis" label-visibility="Collapsed"></igc-numeric-y-axis>
</igc-data-chart>
Axis Labels Abbreviation
Embora os gráficos de Web Components 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 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 Web Components.
<igc-category-chart y-axis-title="In millions of Dollars"></igc-category-chart>
<igc-financial-chart y-axis-title="In millions of Dollars"></igc-financial-chart>
<igc-data-chart>
<igc-numeric-y-axis title="In millions of Dollars"></igc-numeric-y-axis>
</igc-data-chart>
Axis Labels Extent
No tempo de execução, os gráficos Web Components 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 Web Components.
<igc-category-chart x-axis-label-extent="50" y-axis-label-extent="50"></igc-category-chart>
<igc-financial-chart x-axis-label-extent="50" y-axis-label-extent="50"></igc-financial-chart>
<igc-data-chart>
<igc-category-x-axis name="xAxis" label-extent="50"></igc-category-x-axis>
<igc-numeric-y-axis name="yAxis" label-extent="50"></igc-numeric-y-axis>
</igc-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 Web Components.
Por exemplo, alterando essas propriedades no controle IgcCategoryChartComponent ou IgcFinancialChartComponent:
| 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 IgcAxisComponent no controle IgcDataChartComponent:
| 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 IgcFinancialChartComponent do Web Components 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 IgcDataChartComponent do Web Components tem os seguintes recursos exclusivos que afetam o desempenho.
Axes Collection
Adicionar muitos eixos à coleção Axes do controle IgcDataChartComponent diminuirá o desempenho do gráfico e recomendamos compartilhar eixos entre séries.
Series Collection
Além disso, adicionar muitas séries à coleção IgcSeriesComponent do controle IgcDataChartComponent do Web Components 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 achatada (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+ deIgcLineSeriesComponent |
ÚnicoIgcScatterLineSeriesComponent |
20+ deIgcLineSeriesComponent |
ÚnicoIgcScatterPolylineSeriesComponent |
10+ deIgcScatterLineSeriesComponent |
ÚnicoIgcScatterPolylineSeriesComponent |
10+ deIgcPointSeriesComponent |
ÚnicoIgcScatterSeriesComponent |
20+ deIgcPointSeriesComponent |
ÚnicoIgcHighDensityScatterSeriesComponent |
20+ deIgcScatterSeriesComponent |
ÚnicoIgcHighDensityScatterSeriesComponent |
10+ deIgcAreaSeriesComponent |
ÚnicoIgcScatterPolygonSeriesComponent |
10+ deIgcColumnSeriesComponent |
ÚnicoIgcScatterPolygonSeriesComponent |
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: