Líneas de tendencia del gráfico Web Components
En los gráficos Ignite UI for Web Components, las líneas de tendencia ayudan a identificar una tendencia o encontrar patrones en los datos. Las líneas de tendencia siempre se representan delante de los puntos de datos vinculados al gráfico y son compatibles con IgcCategoryChartComponent
, IgcFinancialChartComponent
e IgcDataChartComponent
(excepto series apiladas, series de formas y series de rangos).
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.
Ejemplo de líneas de tendencia de gráfico Web Components
En el ejemplo siguiente se muestra una muestra de la tendencia bursátil de Microsoft entre 2013 y 2017 con una IgcFinancialChartComponent
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.
export class StocksHistory {
/** gets stock OHLC prices for multiple stocks */
public static async getMultipleStocks(): Promise<any[]> {
// getting prices of multiples stocks asynchronously
const dataSources: any[] = [
//await this.getAmazonStock(),
await this.getGoogleStock(),
await this.getMicrosoftStock(),
//await this.getTeslaStock()
];
return new Promise<any[]>((resolve, reject) => {
resolve(dataSources);
});
}
/** gets Amazon stock OHLC prices from a .JSON file */
public static async getAmazonStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData as any).__dataIntents = {
close: ["SeriesTitle/Amazon"]
};
// console.log("fetchAmazonStock: ", stockData.length);
return new Promise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Tesla stock OHLC prices from a .JSON file */
public static async getTeslaStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData as any).__dataIntents = {
close: ["SeriesTitle/Tesla"]
};
return new Promise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Microsoft stock OHLC prices from a .JSON file */
public static async getMicrosoftStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData as any).__dataIntents = {
close: ["SeriesTitle/Microsoft"]
};
return new Promise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Google stock OHLC prices from a .JSON file */
public static async getGoogleStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData as any).__dataIntents = {
close: ["SeriesTitle/Google"]
};
return new Promise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
public static convertData(jsonData: any[]): StockItem[] {
let stockItems: StockItem[] = [];
for (let json of jsonData) {
let parts = json.date.split("-"); // "2020-01-01"
let item = new StockItem();
item.date = new Date(parts[0], parts[1], parts[2]);
item.open = json.open;
item.high = json.high;
item.low = json.low;
item.close = json.close;
item.volume = json.volume;
stockItems.push(item);
}
return stockItems;
}
}
export class StockItem {
public open?: number;
public close?: number;
public high?: number;
public low?: number;
public volume?: number;
public date?: Date;
}
tsimport { IgcFinancialChartModule } from 'igniteui-webcomponents-charts';
import { IgcFinancialChartComponent } from 'igniteui-webcomponents-charts';
import { TrendLineType } from 'igniteui-webcomponents-core';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { StocksHistory } from './StocksHistory';
ModuleManager.register(IgcFinancialChartModule);
export class FinancialChartTrendlines {
private chart: IgcFinancialChartComponent;
public trendLineType: TrendLineType = TrendLineType.QuinticFit;
constructor() {
this.chart = document.getElementById('chart') as IgcFinancialChartComponent;
this.chart.trendLineType = this.trendLineType;
let trendLineSelect = document.getElementById('trendLineSelect');
trendLineSelect!.addEventListener('change', this.onTrendlineChanged);
StocksHistory.getMicrosoftStock().then((stocks: any[]) => {
this.chart.dataSource = stocks;
});
}
public onTrendlineChanged = (e: any) => {
const type = e.target.value;
switch (type) {
case 'CubicFit':
this.trendLineType = TrendLineType.CubicFit;
break;
case 'LinearFit':
this.trendLineType = TrendLineType.LinearFit;
break;
case 'QuinticFit':
this.trendLineType = TrendLineType.QuinticFit;
break;
case 'QuarticFit':
this.trendLineType = TrendLineType.QuarticFit;
break;
case 'ExponentialFit':
this.trendLineType = TrendLineType.ExponentialFit;
break;
case 'PowerLawFit':
this.trendLineType = TrendLineType.PowerLawFit;
break;
case 'LogarithmicFit':
this.trendLineType = TrendLineType.LogarithmicFit;
break;
case 'CumulativeAverage':
this.trendLineType = TrendLineType.CumulativeAverage;
break;
case 'ExponentialAverage':
this.trendLineType = TrendLineType.ExponentialAverage;
break;
case 'SimpleAverage':
this.trendLineType = TrendLineType.SimpleAverage;
break;
case 'ModifiedAverage':
this.trendLineType = TrendLineType.ModifiedAverage;
break;
case 'WeightedAverage':
this.trendLineType = TrendLineType.WeightedAverage;
break;
case 'None':
this.trendLineType = TrendLineType.None;
break;
}
this.chart.trendLineType = this.trendLineType;
}
}
new FinancialChartTrendlines();
ts<!DOCTYPE html>
<html>
<head>
<title>FinancialChartTrendlines</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="options horizontal">
<label class="options-label">Trendline Type:</label>
<select id="trendLineSelect">
<option>QuinticFit</option>
<option>CubicFit</option>
<option>LinearFit</option>
<option>QuarticFit</option>
<option>ExponentialFit</option>
<option>PowerLawFit</option>
<option>LogarithmicFit</option>
<option>CumulativeAverage</option>
<option>ExponentialAverage</option>
<option>SimpleAverage</option>
<option>ModifiedAverage</option>
<option>WeightedAverage</option>
<option>None</option>
</select>
</div>
<div class="container" style="height: calc(100% - 3rem)">
<igc-financial-chart id="chart" width="100%" height="100%"
chart-type="Bar"
thickness="2"
trend-line-thickness="2"
trend-line-period="10"
trend-line-brushes="rgba(0, 101, 209, 1)"
chart-title="Microsoft Trend"
subtitle="Between 2013 and 2017"
zoom-slider-type="None"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
>
</igc-financial-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Ignite UI for Web Components 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 Web Components
En el ejemplo siguiente se muestra una IgcDataChartComponent
muestra de una con una línea de IgcFinancialPriceSeriesComponent
tendencia discontinua QuarticFit aplicada a través de la trendLineDashArray
propiedad:
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)));
}
}
}
tsimport { IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartCategoryTrendLineModule, IgcDataChartFinancialCoreModule, IgcDataChartFinancialModule, IgcDataChartFinancialOverlaysModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcFinancialPriceSeriesComponent } from 'igniteui-webcomponents-charts';
import { Stock2YearsItem, Stock2Years } from './Stock2Years';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartCategoryModule,
IgcDataChartCategoryCoreModule,
IgcDataChartCategoryTrendLineModule,
IgcDataChartFinancialCoreModule,
IgcDataChartFinancialModule,
IgcDataChartFinancialOverlaysModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule
);
export class Sample {
private chart: IgcDataChartComponent
private xAxis: IgcCategoryXAxisComponent
private yAxis: IgcNumericYAxisComponent
private series1: IgcFinancialPriceSeriesComponent
private _bind: () => void;
constructor() {
var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
var xAxis = this.xAxis = document.getElementById('xAxis') as IgcCategoryXAxisComponent;
var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
var series1 = this.series1 = document.getElementById('Series1') as IgcFinancialPriceSeriesComponent;
this._bind = () => {
xAxis.dataSource = this.stock2Years;
series1.xAxis = this.xAxis;
series1.yAxis = this.yAxis;
series1.dataSource = this.stock2Years;
}
this._bind();
}
private _stock2Years: Stock2Years = null;
public get stock2Years(): Stock2Years {
if (this._stock2Years == null)
{
this._stock2Years = new Stock2Years();
}
return this._stock2Years;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="container fill">
<igc-data-chart
name="chart"
id="chart"
should-auto-expand-margin-for-initial-labels="true"
computed-plot-area-margin-mode="Series"
is-vertical-zoom-enabled="true"
is-horizontal-zoom-enabled="true">
<igc-category-x-axis
name="xAxis"
id="xAxis"
label-location="OutsideBottom"
label="month"
interval="1"
label-extent="30">
</igc-category-x-axis>
<igc-numeric-y-axis
name="yAxis"
id="yAxis"
label-location="OutsideRight">
</igc-numeric-y-axis>
<igc-financial-price-series
name="Series1"
id="Series1"
title="Stock Price"
display-type="Candlestick"
open-member-path="open"
high-member-path="high"
low-member-path="low"
close-member-path="close"
volume-member-path="volume"
show-default-tooltip="true"
trend-line-type="QuarticFit"
trend-line-brush="dodgerblue"
trend-line-dash-array="5, 5">
</igc-financial-price-series>
</igc-data-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Recursos adicionales
Puede encontrar más información sobre las funciones de gráficos relacionadas en estos temas:
Referencias de API
Los componentes IgcCategoryChartComponent
e IgcFinancialChartComponent
comparten las siguientes propiedades de API:
En el componente IgcDataChartComponent
, la mayoría de los tipos de series tienen las siguientes propiedades API: