Linhas de tendência do gráfico React
Nos gráficos Ignite UI for React, as linhas de tendência ajudam a identificar uma tendência ou a 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 pelasIgrCategoryChart séries empilhadas,IgrFinancialChartIgrDataChart e (exceto para séries empilhadas, séries de forma e séries de intervalo).
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.
React Chart Trendlines Example
O exemplo a seguirIgrFinancialChart 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.
React Chart Trendlines Dash Array Example
O exemplo a seguir mostraIgrDataChart um mostrando aIgrFinancialPriceSeries com uma linha de tendência tracejada QuarticFit aplicada via atrendLineDashArray propriedade:
React Chart Trendline Layer
ÉIgrTrendLineLayer 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 éIgrTrendLineLayer um tipo de série, você pode adicionar mais de uma delas àIgrSeries 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
ElesIgrTrendLineLayer 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 oIgrTrendLineLayer na Lenda, pode fazê-lo configurando aUseLegend propriedade paratrue.
Styling the Trendline Layer
Por padrão, oIgrTrendLineLayer render é renderizado com a mesma cor quetargetSeries está em uma linha tracejada. Isso pode ser configurado usando as várias propriedades de estilo noIgrTrendLineLayer
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 oIgrTrendLineLayer está colocado na coleção doIgrSeries gráfico.
Você também pode modificar a forma como oIgrTrendLineLayer 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 otargetSeriespincel e modifica seu brilho com base no fornecido.ShiftAmountDashPattern: A linha de tendência aparecerá como uma linha tracejada. A frequência dos traços pode ser modificada usando aDashArraypropriedade em .IgrTrendLineLayerOpacityShift: A linha de tendência pega otargetSeriespincel e modifica sua opacidade com base no fornecido.ShiftAmountSaturationShift: A linha de tendência pega otargetSeriespincel 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
OsIgrCategoryChart componentes eIgrFinancialChart compartilham as seguintes propriedades da API:
NoIgrDataChart componente, a maioria dos tipos de séries possui as seguintes propriedades da API: