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 enlazados al gráfico y son compatibles con el , IgxFinancialChartComponent
, y IgxDataChartComponent
(excepto para las series apiladas, las series de formas y las IgxCategoryChartComponent
series de rango).
Las líneas de tendencia están desactivadas de forma predeterminada, pero puede habilitarlas configurando la propiedad trendLineType
. Además, puede modificar múltiples propiedades de apariencia de las líneas de tendencia, como su pincel, período y grosor.
Las líneas de tendencia también tienen la capacidad de que se les aplique una matriz de guiones una vez habilitadas. Esto se hace configurando la propiedad TrendLineDashArray
en una matriz de números. La matriz numérica describe la longitud de los guiones de la línea de tendencia.
Angular Ejemplo de líneas de tendencia del gráfico
En el ejemplo siguiente se muestra una IgxFinancialChartComponent
muestra de la tendencia bursátil de Microsoft entre 2013 y 2017 con una línea de tendencia QuinticFit aplicada inicialmente. Hay un menú desplegable que le permitirá cambiar el tipo de línea de tendencia que se aplica, y todos los tipos de línea de tendencia posibles se enumeran dentro de ese menú desplegable.
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Ejemplo de matriz de guiones de líneas de tendencia de gráfico de Angular
En el ejemplo siguiente se muestra una IgxDataChartComponent
muestra de una IgxFinancialPriceSeriesComponent
con una línea de tendencia discontinua QuarticFit aplicada a través de la trendLineDashArray
propiedad:
EXAMPLE
DATA
MODULES
TS
HTML
SCSS
export class Stock2YearsItem {
public constructor (init: Partial<Stock2YearsItem> ) {
Object .assign(this , init);
}
public month: string ;
public open: number ;
public high: number ;
public low: number ;
public close: number ;
public volume: number ;
}
export class Stock2Years extends Array <Stock2YearsItem > {
public constructor (items: Array <Stock2YearsItem> | number = -1 ) {
if (Array .isArray(items)) {
super (...items);
} else {
const newItems = [
new Stock2YearsItem(
{
month : `2020` ,
open : 41.1 ,
high : 41.6 ,
low : 41.1 ,
close : 41.4 ,
volume : 32610
}),
new Stock2YearsItem(
{
month : `FEB` ,
open : 41.4 ,
high : 41.7 ,
low : 41.2 ,
close : 41.4 ,
volume : 28666
}),
new Stock2YearsItem(
{
month : `MAR` ,
open : 41.3 ,
high : 41.3 ,
low : 40.7 ,
close : 41 ,
volume : 30139
}),
new Stock2YearsItem(
{
month : `APR` ,
open : 41.3 ,
high : 41.4 ,
low : 39.6 ,
close : 39.9 ,
volume : 51409
}),
new Stock2YearsItem(
{
month : `MAY` ,
open : 40 ,
high : 40.3 ,
low : 39.7 ,
close : 39.8 ,
volume : 37559
}),
new Stock2YearsItem(
{
month : `JUN` ,
open : 39.8 ,
high : 39.9 ,
low : 39.2 ,
close : 39.8 ,
volume : 35919
}),
new Stock2YearsItem(
{
month : `JUL` ,
open : 39.9 ,
high : 40.5 ,
low : 39.9 ,
close : 40.5 ,
volume : 27398
}),
new Stock2YearsItem(
{
month : `AUG` ,
open : 40.4 ,
high : 40.7 ,
low : 39.1 ,
close : 39.4 ,
volume : 45960
}),
new Stock2YearsItem(
{
month : `SEP` ,
open : 39 ,
high : 39.8 ,
low : 39 ,
close : 39.2 ,
volume : 34333
}),
new Stock2YearsItem(
{
month : `OCT` ,
open : 39.1 ,
high : 39.4 ,
low : 38.9 ,
close : 39.2 ,
volume : 32006
}),
new Stock2YearsItem(
{
month : `NOV` ,
open : 39.3 ,
high : 40 ,
low : 39 ,
close : 39.8 ,
volume : 33978
}),
new Stock2YearsItem(
{
month : `DEC` ,
open : 40.1 ,
high : 40.4 ,
low : 39.9 ,
close : 40.4 ,
volume : 30616
}),
new Stock2YearsItem(
{
month : `2021` ,
open : 40 ,
high : 40.2 ,
low : 39.5 ,
close : 40 ,
volume : 36689
}),
new Stock2YearsItem(
{
month : `FEB` ,
open : 40.1 ,
high : 40.1 ,
low : 39.8 ,
close : 39.9 ,
volume : 22222
}),
new Stock2YearsItem(
{
month : `MAR` ,
open : 40 ,
high : 40.1 ,
low : 39.8 ,
close : 40 ,
volume : 27057
}),
new Stock2YearsItem(
{
month : `APR` ,
open : 40 ,
high : 40 ,
low : 39.5 ,
close : 39.7 ,
volume : 24602
}),
new Stock2YearsItem(
{
month : `MAY` ,
open : 39.7 ,
high : 40 ,
low : 39.3 ,
close : 39.9 ,
volume : 42381
}),
new Stock2YearsItem(
{
month : `JUN` ,
open : 40.3 ,
high : 40.7 ,
low : 39.8 ,
close : 39.9 ,
volume : 56883
}),
new Stock2YearsItem(
{
month : `JUL` ,
open : 40.1 ,
high : 41.3 ,
low : 40.1 ,
close : 40.9 ,
volume : 50610
}),
new Stock2YearsItem(
{
month : `AUG` ,
open : 41.1 ,
high : 41.2 ,
low : 40.4 ,
close : 40.5 ,
volume : 29637
}),
new Stock2YearsItem(
{
month : `SEP` ,
open : 39 ,
high : 39.8 ,
low : 39 ,
close : 39.2 ,
volume : 34333
}),
new Stock2YearsItem(
{
month : `OCT` ,
open : 39.1 ,
high : 39.4 ,
low : 38.9 ,
close : 39.2 ,
volume : 32006
}),
new Stock2YearsItem(
{
month : `NOV` ,
open : 39.3 ,
high : 40 ,
low : 39 ,
close : 39.8 ,
volume : 33978
}),
new Stock2YearsItem(
{
month : `DEC` ,
open : 40.1 ,
high : 40.4 ,
low : 39.9 ,
close : 40.4 ,
volume : 30616
}),
];
super (...(newItems.slice(0 , items)));
}
}
}
ts コピー import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartCategoryTrendLineModule, IgxDataChartFinancialCoreModule, IgxDataChartFinancialModule, IgxDataChartFinancialOverlaysModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts' ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxDataChartCoreModule,
IgxDataChartCategoryModule,
IgxDataChartCategoryCoreModule,
IgxDataChartCategoryTrendLineModule,
IgxDataChartFinancialCoreModule,
IgxDataChartFinancialModule,
IgxDataChartFinancialOverlaysModule,
IgxDataChartInteractivityModule,
IgxDataChartAnnotationModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core' ;
import { Stock2YearsItem, Stock2Years } from './Stock2Years' ;
import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxFinancialPriceSeriesComponent } from 'igniteui-angular-charts' ;
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html" ,
changeDetection : ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild ("chart" , { static : true } )
private chart: IgxDataChartComponent
@ViewChild ("xAxis" , { static : true } )
private xAxis: IgxCategoryXAxisComponent
@ViewChild ("yAxis" , { static : true } )
private yAxis: IgxNumericYAxisComponent
@ViewChild ("series1" , { static : true } )
private series1: IgxFinancialPriceSeriesComponent
private _stock2Years: Stock2Years = null ;
public get stock2Years (): Stock2Years {
if (this ._stock2Years == null )
{
this ._stock2Years = new Stock2Years();
}
return this ._stock2Years;
}
public constructor (private _detector: ChangeDetectorRef )
{
}
public ngAfterViewInit(): void
{
}
}
ts コピー <div class ="container vertical sample" >
<div class ="container fill" >
<igx-data-chart
name ="chart"
#chart
shouldAutoExpandMarginForInitialLabels ="true"
computedPlotAreaMarginMode ="Series"
isVerticalZoomEnabled ="true"
isHorizontalZoomEnabled ="true" >
<igx-category-x-axis
name ="xAxis"
#xAxis
[dataSource ]="stock2Years"
labelLocation ="OutsideBottom"
label ="month"
interval ="1"
labelExtent ="30" >
</igx-category-x-axis >
<igx-numeric-y-axis
name ="yAxis"
#yAxis
labelLocation ="OutsideRight" >
</igx-numeric-y-axis >
<igx-financial-price-series
name ="Series1"
#series1
title ="Stock Price"
displayType ="Candlestick"
[xAxis ]="xAxis"
[yAxis ]="yAxis"
[dataSource ]="stock2Years"
openMemberPath ="open"
highMemberPath ="high"
lowMemberPath ="low"
closeMemberPath ="close"
volumeMemberPath ="volume"
showDefaultTooltip ="true"
trendLineType ="QuarticFit"
trendLineBrush ="dodgerblue"
trendLineDashArray ="5, 5" >
</igx-financial-price-series >
</igx-data-chart >
</div >
</div >
html コピー
Recursos adicionales
Puede encontrar más información sobre las funciones de gráficos relacionadas en estos temas:
Referencias de API
Los componentes IgxCategoryChartComponent
e IgxFinancialChartComponent
comparten las siguientes propiedades de API:
En el componente IgxDataChartComponent
, la mayoría de los tipos de series tienen las siguientes propiedades API: