Angular Líneas de tendencia del gráfico
En Ignite UI for Angular gráficos, las líneas de tendencia ayudan a identificar una tendencia o a encontrar patrones en los datos. Las líneas de tendencia siempre se representan delante de los puntos de datos vinculados al gráfico y están soportadas por elIgxCategoryChartComponent,IgxFinancialChartComponent yIgxDataChartComponent (excepto las series apiladas, series de forma y series de rango).
Las líneas de tendencia están desajustadas por defecto, pero puedes activarlas configurando latrendLineType propiedad. Además, puedes modificar múltiples propiedades de apariencia de las líneas de tendencia, como su cepillo, periodo y grosor.
Las líneas de tendencia también pueden tener un array de guiones una vez habilitadas. Esto se hace estableciendo laTrendLineDashArray propiedad en un array de números. El array numérico describe la longitud de los guiones de la línea de tendencia.
Angular Chart Trendlines Example
El siguiente ejemplo muestra laIgxFinancialChartComponent tendencia bursátil de Microsoft entre 2013 y 2017 con una línea de tendencia QuinticFit aplicada inicialmente. Hay un desplegable que te permitirá cambiar el tipo de línea de tendencia aplicada, y todos los tipos posibles de líneas de tendencia se listan dentro de ese desplegable.
Angular Chart Trendlines Dash Array Example
El siguiente ejemplo muestra unaIgxDataChartComponent muestra aIgxFinancialPriceSeriesComponent con una línea de tendencia discontinua QuarticFit aplicada mediante latrendLineDashArray propiedad:
Angular Chart Trendline Layer
EsIgxTrendLineLayerComponent un tipo de serie diseñado para mostrar un único tipo de línea de tendencia para una serie objetivo. La diferencia entre esto y las características de líneas de tendencia existentes en los tipos de series existentes es que, dado que esIgxTrendLineLayerComponent un tipo de serie, puedes añadir más de una a laIgxSeriesComponent colección del gráfico para tener múltiples líneas de tendencia asociadas a la misma serie. También puedes hacer que la línea de tendencia aparezca en la leyenda, algo que antes no era posible.
Trendline Layer Usage
DebenIgxTrendLineLayerComponent contar con unatargetSeries ytrendLineType otra para funcionar correctamente. Los diferentes tipos de líneas de tendencia disponibles son los mismos que las que aparecen en la serie.
Si quieres mostrar laIgxTrendLineLayerComponent Leyenda, puedes hacerlo configurando laUseLegend propiedad paratrue.
Styling the Trendline Layer
Por defecto, seIgxTrendLineLayerComponent renderiza con el mismo color quetargetSeries en línea discusa. Esto se puede configurar utilizando las distintas propiedades de estilo en elIgxTrendLineLayerComponent.
Para cambiar el color de la línea de tendencia que se dibuja, puedes establecer suBrush propiedad. Alternativamente, también puedes establecer laUseIndex propiedad comotrue, que extraerá de la paleta delbrushes gráfico según el índice en el que seIgxTrendLineLayerComponent coloque en la colección delIgxSeriesComponent gráfico.
También puedes modificar la forma en que apareceIgxTrendLineLayerComponent usando susAppearanceMode propiedades de yShiftAmount. TomaShiftAmount un valor entre -1.0 y 1.0 para determinar cuánto de un "desplazamiento" aplicar a las opciones que terminan en "Desplazamiento".
Las siguientes son las opciones para laAppearanceMode propiedad:
Auto: Esto se aplicará por defecto a la enumeración DashPattern.BrightnessShift: La línea de tendencia tomará eltargetSeriespincel y modificará su brillo según lo proporcionadoShiftAmount.DashPattern: La línea de tendencia aparecerá como una línea discontinua. La frecuencia de los guiones puede modificarse usando laDashArraypropiedad en elIgxTrendLineLayerComponent.OpacityShift: La línea de tendencia tomará eltargetSeriespincel y modificará su opacidad según lo proporcionadoShiftAmount.SaturationShift: La línea de tendencia tomará eltargetSeriespincel y modificará su saturación según lo proporcionadoShiftAmount.
Additional Resources
Puede encontrar más información sobre las funciones de gráficos relacionadas en estos temas:
API References
LosIgxCategoryChartComponent componentes yIgxFinancialChartComponent comparten las siguientes propiedades de la API:
En elIgxDataChartComponent componente, la mayoría de los tipos de series tienen las siguientes propiedades de la API:
GitHub