Angular linhas de tendência do gráfico

    In Ignite UI for Angular charts, trendlines help in identifying a trend or finding patterns in data. Trendlines are always rendered in front of data points bound to the chart and are supported by the IgxCategoryChartComponent, IgxFinancialChartComponent, and IgxDataChartComponent (except for stacked series, shape series, and range series).

    As linhas de tendência estão desreguladas por padrão, mas você pode habilitá-las definindo atrendLineType propriedade. Além disso, você pode modificar múltiplas propriedades de aparência das linhas de tendência, como seu pincel, período e espessura.

    As linhas de tendência também têm a capacidade de ter um array de traços aplicado a elas uma vez ativadas. Isso é feito definindo aTrendLineDashArray propriedade para um array de números. O array numérico descreve o comprimento dos traços da linha de tendência.

    Angular Chart Trendlines Example

    O exemplo a seguirIgxFinancialChartComponent mostra a tendência das ações da Microsoft entre 2013 e 2017, com uma linha de tendência QuinticFit inicialmente aplicada. Há um menu suspenso que permite alterar o tipo de linha de tendência aplicada, e todos os tipos possíveis de linha de tendência estão listados dentro desse menu.

    Angular Chart Trendlines Dash Array Example

    O exemplo a seguir mostraIgxDataChartComponent um mostrando aIgxFinancialPriceSeriesComponent com uma linha de tendência tracejada QuarticFit aplicada via atrendLineDashArray propriedade:

    Angular Chart Trendline Layer

    ÉIgxTrendLineLayerComponent um tipo de série projetado para exibir um único tipo de linha de tendência para uma série-alvo. A diferença entre isso e as características de linhas de tendência existentes nos tipos de séries existentes é que, como éIgxTrendLineLayerComponent um tipo de série, você pode adicionar mais de uma delas àIgxSeriesComponent coleção do gráfico para ter múltiplas linhas de tendência ligadas à mesma série. Você também pode fazer a linha de tendência aparecer na lenda, o que antes não era possível.

    Trendline Layer Usage

    ElesIgxTrendLineLayerComponent precisam ser fornecidos com umtargetSeries e umtrendLineType para funcionar corretamente. Os diferentes tipos de tendências disponíveis são os mesmos que os tendências disponíveis na série.

    Se você quiser mostrar oIgxTrendLineLayerComponent na Lenda, pode fazê-lo configurando aUseLegend propriedade paratrue.

    Styling the Trendline Layer

    Por padrão, oIgxTrendLineLayerComponent render é renderizado com a mesma cor quetargetSeries está em uma linha tracejada. Isso pode ser configurado usando as várias propriedades de estilo noIgxTrendLineLayerComponent​

    Para mudar a cor da linha de tendência desenhada, você pode definir suaBrush propriedade. Alternativamente, você também pode definir aUseIndex propriedade paratrue, que irá puxar da paleta dobrushes gráfico com base no índice em que oIgxTrendLineLayerComponent está colocado na coleção doIgxSeriesComponent gráfico.

    Você também pode modificar a forma como oIgxTrendLineLayerComponent apareça usando suasAppearanceMode propriedades eShiftAmount. EleShiftAmount toma um valor entre -1,0 e 1,0 para determinar quanto de um "shift" aplicar às opções que terminam em "Shift".

    A seguir estão as opções para aAppearanceMode propriedade:

    • Auto: Isso irá usar a enumeração DashPattern por padrão.
    • BrightnessShift: A linha de tendência pega otargetSeries pincel e modifica seu brilho com base no fornecido.ShiftAmount​
    • DashPattern: A linha de tendência aparecerá como uma linha tracejada. A frequência dos traços pode ser modificada usando aDashArray propriedade em .IgxTrendLineLayerComponent​
    • OpacityShift: A linha de tendência pega otargetSeries pincel e modifica sua opacidade com base no fornecido.ShiftAmount​
    • SaturationShift: A linha de tendência pega otargetSeries pincel e modifica sua saturação com base no fornecido.ShiftAmount​

    Additional Resources

    Você pode encontrar mais informações sobre recursos de gráfico relacionados nestes tópicos:

    API References

    OsIgxCategoryChartComponent componentes eIgxFinancialChartComponent compartilham as seguintes propriedades da API:

    NoIgxDataChartComponent componente, a maioria dos tipos de séries possui as seguintes propriedades da API: