Angular linhas de tendência do gráfico
Em Ignite UI for Angular gráficos, as linhas de tendência ajudam a identificar uma tendência ou encontrar padrões nos dados. As linhas de tendência são sempre renderizadas na frente dos pontos de dados vinculados ao gráfico e são suportadas por the IgxCategoryChartComponent, IgxFinancialChartComponent, e IgxDataChartComponent (exceto para séries empilhadas, séries de formas e séries de intervalos).
As linhas de tendência estão desativadas por padrão, mas você pode ativá-las definindo a trendLineType propriedade. Além disso, você pode modificar várias propriedades de aparência das linhas de tendência, como pincel, período e espessura.
As linhas de tendência também têm a capacidade de ter uma matriz de traços aplicada a elas, uma vez ativadas. Isso é feito definindo a TrendLineDashArray propriedade como uma matriz de números. A matriz numérica descreve o comprimento dos traços da linha de tendência.
Angular Exemplo de linhas de tendência do gráfico
O exemplo a seguir mostra IgxFinancialChartComponent a tendência de ações da Microsoft entre 2013 e 2017 com uma linha de tendência QuinticFit aplicada inicialmente. Há um menu suspenso que permitirá que você altere o tipo de linha de tendência que é aplicada, e todos os tipos de linha de tendência possíveis são listados nesse menu suspenso.
Angular Exemplo de matriz de traços de linhas de tendência de gráfico
O exemplo a seguir mostra um IgxDataChartComponent com uma IgxFinancialPriceSeriesComponent linha de tendência tracejada QuarticFit aplicada por meio da trendLineDashArray propriedade:
Angular Camada de linha de tendência do gráfico
O TrendLineLayer é um tipo de série projetado para exibir um único tipo de linha de tendência para uma série de destino. A diferença entre isso e os recursos de linha de tendência existentes nos tipos de série existentes é que, como é TrendLineLayer um tipo de série, você pode adicionar mais de um deles à IgxSeriesComponent coleção do gráfico para ter várias linhas de tendência anexadas à mesma série. Você também pode fazer com que a linha de tendência apareça na legenda, o que não era possível anteriormente.
Trendline Layer Usage
O TrendLineLayer deve ser fornecido com a TargetSeries e a trendLineType para funcionar corretamente. Os diferentes tipos de linha de tendência disponíveis são os mesmos que as linhas de tendência disponíveis na série.
Se você quiser mostrar o TrendLineLayer na Legenda, poderá fazê-lo definindo a UseLegend propriedade como true.
Styling the Trendline Layer
Por padrão, o renderiza TrendLineLayer com a mesma cor que está TargetSeries em uma linha tracejada. Isso pode ser configurado usando as várias propriedades de estilo no TrendLineLayer.
Para alterar a cor da linha de tendência desenhada, você pode definir sua brush propriedade. Como alternativa, você também pode definir a UseIndex propriedade como true, que será extraída da paleta do brushes gráfico com base no índice no qual o TrendLineLayer é colocado na coleção do IgxSeriesComponent gráfico.
Você também pode modificar a maneira como o TrendLineLayer aparece usando suas AppearanceMode propriedades e ShiftAmount. O ShiftAmount assume um valor entre -1,0 e 1,0 para determinar quanto de um "deslocamento" aplicar às opções que terminam em "Deslocamento".
A seguir estão as opções para a AppearanceMode propriedade:
Auto: Isso será padronizado para a enumeração DashPattern.BrightnessShift: A linha de tendência pegará oTargetSeriespincel e modificará seu brilho com base no fornecidoShiftAmount.DashPattern: A linha de tendência aparecerá como uma linha tracejada. A frequência dos traços pode ser modificada usando adashArraypropriedade noTrendLineLayer.OpacityShift: A linha de tendência pegará oTargetSeriespincel e modificará sua opacidade com base no fornecidoShiftAmount.SaturationShift: A linha de tendência pegará oTargetSeriespincel e modificará sua saturação com base no fornecidoShiftAmount.
Additional Resources
Você pode encontrar mais informações sobre recursos de gráfico relacionados nestes tópicos:
API References
Os IgxCategoryChartComponent componentes e IgxFinancialChartComponent compartilham as seguintes propriedades da API:
No componente, a IgxDataChartComponent maioria dos tipos de séries tem as seguintes propriedades de API:
GitHub