Líneas de tendencia del gráfico Blazor
En los gráficos Ignite UI for Blazor, 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 IgbCategoryChart
, IgbFinancialChart
e IgbDataChart
(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 del gráfico Blazor
En el ejemplo siguiente se muestra una muestra de la tendencia bursátil de Microsoft entre 2013 y 2017 con una IgbFinancialChart
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.
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbFinancialChartModule)
);
await builder.Build().RunAsync();
}
}
}
csusing System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Net.Http;
using System.Net.Http.Json;
using System.Text.Json;
using System.Text.Json.Serialization;
using System.Globalization;
namespace Infragistics.Samples
{
public class StocksHistory
{
public static async Task<List<StockPrice[]>> GetMultipleStocks()
{
// getting prices of multiples stocks asynchronously
var dataSources = new List<StockPrice[]> {
//await GetAmazonStock(),
await GetGoogleStock(),
await GetMicrosoftStock(),
//await GetTeslaStock()
};
return dataSources;
}
/** gets Amazon stock OHLC prices from a .JSON file */
public static async Task<StockPrice[]> GetAmazonStock()
{
var url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json";
//TODO
// setting data intent for Series Title, e.g. FinancialChart usage
//(stockData as any).__dataIntents = {
// close: ["SeriesTitle/Amazon"]
//};
// console.log("fetchAmazonStock: ", stockData.length);
//var serializeOptions = new JsonSerializerOptions();
//serializeOptions.Converters.Add(new DateTimeConverter());
var http = new HttpClient();
var data = await http.GetFromJsonAsync<StockPrice[]>(url);
foreach (var item in data)
{
var dateArray = item.Date.Split("-");
var d = int.Parse(dateArray[2]);
var m = int.Parse(dateArray[1]) + 1;
var y = int.Parse(dateArray[0]);
item.Time = new DateTime(y, m, d);
}
return data;
}
/** gets Tesla stock OHLC prices from a .JSON file */
public static async Task<StockPrice[]> GetTeslaStock()
{
var url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json";
//TODO
// setting data intent for Series Title, e.g. FinancialChart usage
//(stockData as any).__dataIntents = {
// close: ["SeriesTitle/Amazon"]
//};
// console.log("fetchAmazonStock: ", stockData.length);
var serializeOptions = new JsonSerializerOptions();
serializeOptions.Converters.Add(new DateTimeConverter());
var http = new HttpClient();
var data = await http.GetFromJsonAsync<StockPrice[]>(url);
foreach (var item in data)
{
var dateArray = item.Date.Split("-");
var d = int.Parse(dateArray[2]);
var m = int.Parse(dateArray[1]) + 1;
var y = int.Parse(dateArray[0]);
item.Time = new DateTime(y, m, d);
}
return data;
}
/** gets Microsoft stock OHLC prices from a .JSON file */
public static async Task<StockPrice[]> GetMicrosoftStock()
{
var url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json";
//TODO
// setting data intent for Series Title, e.g. FinancialChart usage
//(stockData as any).__dataIntents = {
// close: ["SeriesTitle/Amazon"]
//};
// console.log("fetchAmazonStock: ", stockData.length);
var serializeOptions = new JsonSerializerOptions();
serializeOptions.Converters.Add(new DateTimeConverter());
var http = new HttpClient();
var data = await http.GetFromJsonAsync<StockPrice[]>(url);
foreach (var item in data)
{
var dateArray = item.Date.Split("-");
var d = int.Parse(dateArray[2]);
var m = int.Parse(dateArray[1]) + 1;
var y = int.Parse(dateArray[0]);
item.Time = new DateTime(y, m, d);
}
return data;
}
public static async Task<StockPrice[]> GetGoogleStock()
{
var url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json";
//TODO
// setting data intent for Series Title, e.g. FinancialChart usage
//(stockData as any).__dataIntents = {
// close: ["SeriesTitle/Amazon"]
//};
// console.log("fetchAmazonStock: ", stockData.length);
var serializeOptions = new JsonSerializerOptions();
serializeOptions.Converters.Add(new DateTimeConverter());
var http = new HttpClient();
var data = await http.GetFromJsonAsync<StockPrice[]>(url);
foreach (var item in data)
{
var dateArray = item.Date.Split("-");
var d = int.Parse(dateArray[2]);
var m = int.Parse(dateArray[1]) + 1;
var y = int.Parse(dateArray[0]);
item.Time = new DateTime(y, m, d);
}
return data;
}
}
public class DateTimeConverter : JsonConverter<DateTime>
{
public override DateTime Read(
ref Utf8JsonReader reader,
Type typeToConvert,
JsonSerializerOptions options)
{
return DateTime.Now;
}
public override void Write(
Utf8JsonWriter writer,
DateTime date,
JsonSerializerOptions options) =>
writer.WriteStringValue(date.ToString());
}
public class StockPrice
{
public string Date { get; set; }
public DateTime Time { get; set; }
public double Open { get; set; }
public double High { get; set; }
public double Low { get; set; }
public double Close { get; set; }
public double Volume { get; set; }
public int Index { get; set; }
}
}
cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="options horizontal">
<label class="options-label">Trendlines: </label>
<label class="options-item">
<select @bind="@TrendLineType">
<option>@TrendLineType.CubicFit</option>
<option>@TrendLineType.LinearFit</option>
<option>@TrendLineType.QuinticFit</option>
<option>@TrendLineType.QuarticFit</option>
<option>@TrendLineType.ExponentialFit</option>
<option>@TrendLineType.PowerLawFit</option>
<option>@TrendLineType.LogarithmicFit</option>
<option>@TrendLineType.CumulativeAverage</option>
<option>@TrendLineType.ExponentialAverage</option>
<option>@TrendLineType.SimpleAverage</option>
<option>@TrendLineType.ModifiedAverage</option>
<option>@TrendLineType.WeightedAverage</option>
<option>@TrendLineType.None</option>
</select>
</label>
</div>
<div class="container vertical">
@if (Data != null)
{
<IgbFinancialChart Width="100%"
Height="100%"
ChartType=FinancialChartType.Bar
Thickness=2
DataSource="Data"
TrendLineType="@TrendLineType"
TrendLineThickness=2
TrendLinePeriod=10
TrendLineBrushes="rgba(0, 101, 209, 1)"
ChartTitle="Microsoft Trend"
Subtitle="Between 2013 and 2017"
ZoomSliderType="FinancialChartZoomSliderType.None"
IsHorizontalZoomEnabled="false"
IsVerticalZoomEnabled="false"/>
}
</div>
</div>
@code {
protected StockPrice[] Data;
protected TrendLineType TrendLineType = TrendLineType.QuinticFit;
protected override async Task OnInitializedAsync()
{
this.Data = await StocksHistory.GetMicrosoftStock();
}
}
razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Ignite UI for Blazor 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 Blazor
En el ejemplo siguiente se muestra una IgbDataChart
muestra de una con una línea de IgbFinancialPriceSeries
tendencia discontinua QuarticFit aplicada a través de la TrendLineDashArray
propiedad:
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbDataChartCoreModule),
typeof(IgbDataChartCategoryModule),
typeof(IgbDataChartCategoryCoreModule),
typeof(IgbDataChartCategoryTrendLineModule),
typeof(IgbDataChartFinancialCoreModule),
typeof(IgbDataChartFinancialModule),
typeof(IgbDataChartFinancialOverlaysModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbDataChartAnnotationModule)
);
await builder.Build().RunAsync();
}
}
}
csusing System;
using System.Collections.Generic;
public class Stock2YearsItem
{
public string Month { get; set; }
public double Open { get; set; }
public double High { get; set; }
public double Low { get; set; }
public double Close { get; set; }
public double Volume { get; set; }
}
public class Stock2Years
: List<Stock2YearsItem>
{
public Stock2Years()
{
this.Add(new Stock2YearsItem()
{
Month = @"2020",
Open = 41.1,
High = 41.6,
Low = 41.1,
Close = 41.4,
Volume = 32610
});
this.Add(new Stock2YearsItem()
{
Month = @"FEB",
Open = 41.4,
High = 41.7,
Low = 41.2,
Close = 41.4,
Volume = 28666
});
this.Add(new Stock2YearsItem()
{
Month = @"MAR",
Open = 41.3,
High = 41.3,
Low = 40.7,
Close = 41,
Volume = 30139
});
this.Add(new Stock2YearsItem()
{
Month = @"APR",
Open = 41.3,
High = 41.4,
Low = 39.6,
Close = 39.9,
Volume = 51409
});
this.Add(new Stock2YearsItem()
{
Month = @"MAY",
Open = 40,
High = 40.3,
Low = 39.7,
Close = 39.8,
Volume = 37559
});
this.Add(new Stock2YearsItem()
{
Month = @"JUN",
Open = 39.8,
High = 39.9,
Low = 39.2,
Close = 39.8,
Volume = 35919
});
this.Add(new Stock2YearsItem()
{
Month = @"JUL",
Open = 39.9,
High = 40.5,
Low = 39.9,
Close = 40.5,
Volume = 27398
});
this.Add(new Stock2YearsItem()
{
Month = @"AUG",
Open = 40.4,
High = 40.7,
Low = 39.1,
Close = 39.4,
Volume = 45960
});
this.Add(new Stock2YearsItem()
{
Month = @"SEP",
Open = 39,
High = 39.8,
Low = 39,
Close = 39.2,
Volume = 34333
});
this.Add(new Stock2YearsItem()
{
Month = @"OCT",
Open = 39.1,
High = 39.4,
Low = 38.9,
Close = 39.2,
Volume = 32006
});
this.Add(new Stock2YearsItem()
{
Month = @"NOV",
Open = 39.3,
High = 40,
Low = 39,
Close = 39.8,
Volume = 33978
});
this.Add(new Stock2YearsItem()
{
Month = @"DEC",
Open = 40.1,
High = 40.4,
Low = 39.9,
Close = 40.4,
Volume = 30616
});
this.Add(new Stock2YearsItem()
{
Month = @"2021",
Open = 40,
High = 40.2,
Low = 39.5,
Close = 40,
Volume = 36689
});
this.Add(new Stock2YearsItem()
{
Month = @"FEB",
Open = 40.1,
High = 40.1,
Low = 39.8,
Close = 39.9,
Volume = 22222
});
this.Add(new Stock2YearsItem()
{
Month = @"MAR",
Open = 40,
High = 40.1,
Low = 39.8,
Close = 40,
Volume = 27057
});
this.Add(new Stock2YearsItem()
{
Month = @"APR",
Open = 40,
High = 40,
Low = 39.5,
Close = 39.7,
Volume = 24602
});
this.Add(new Stock2YearsItem()
{
Month = @"MAY",
Open = 39.7,
High = 40,
Low = 39.3,
Close = 39.9,
Volume = 42381
});
this.Add(new Stock2YearsItem()
{
Month = @"JUN",
Open = 40.3,
High = 40.7,
Low = 39.8,
Close = 39.9,
Volume = 56883
});
this.Add(new Stock2YearsItem()
{
Month = @"JUL",
Open = 40.1,
High = 41.3,
Low = 40.1,
Close = 40.9,
Volume = 50610
});
this.Add(new Stock2YearsItem()
{
Month = @"AUG",
Open = 41.1,
High = 41.2,
Low = 40.4,
Close = 40.5,
Volume = 29637
});
this.Add(new Stock2YearsItem()
{
Month = @"SEP",
Open = 39,
High = 39.8,
Low = 39,
Close = 39.2,
Volume = 34333
});
this.Add(new Stock2YearsItem()
{
Month = @"OCT",
Open = 39.1,
High = 39.4,
Low = 38.9,
Close = 39.2,
Volume = 32006
});
this.Add(new Stock2YearsItem()
{
Month = @"NOV",
Open = 39.3,
High = 40,
Low = 39,
Close = 39.8,
Volume = 33978
});
this.Add(new Stock2YearsItem()
{
Month = @"DEC",
Open = 40.1,
High = 40.4,
Low = 39.9,
Close = 40.4,
Volume = 30616
});
}
}
cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="container vertical fill">
<IgbDataChart
Name="chart"
@ref="chart"
ShouldAutoExpandMarginForInitialLabels="true"
ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series"
IsVerticalZoomEnabled="true"
IsHorizontalZoomEnabled="true">
<IgbCategoryXAxis
Name="xAxis"
@ref="xAxis"
DataSource="Stock2Years"
LabelLocation="AxisLabelsLocation.OutsideBottom"
Label="Month"
Interval="1"
LabelExtent="30">
</IgbCategoryXAxis>
<IgbNumericYAxis
Name="yAxis"
@ref="yAxis"
LabelLocation="AxisLabelsLocation.OutsideRight">
</IgbNumericYAxis>
<IgbFinancialPriceSeries
Name="Series1"
@ref="series1"
Title="Stock Price"
DisplayType="PriceDisplayType.Candlestick"
XAxisName="xAxis"
YAxisName="yAxis"
DataSource="Stock2Years"
OpenMemberPath="Open"
HighMemberPath="High"
LowMemberPath="Low"
CloseMemberPath="Close"
VolumeMemberPath="Volume"
ShowDefaultTooltip="true"
TrendLineType="TrendLineType.QuarticFit"
TrendLineBrush="dodgerblue"
TrendLineDashArray="@(new double[] { 5, 5 })">
</IgbFinancialPriceSeries>
</IgbDataChart>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var chart = this.chart;
var xAxis = this.xAxis;
var yAxis = this.yAxis;
var series1 = this.series1;
}
private IgbDataChart chart;
private IgbCategoryXAxis xAxis;
private IgbNumericYAxis yAxis;
private IgbFinancialPriceSeries series1;
private Stock2Years _stock2Years = null;
public Stock2Years Stock2Years
{
get
{
if (_stock2Years == null)
{
_stock2Years = new Stock2Years();
}
return _stock2Years;
}
}
}
razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
Blazor WebAssembly および Blazor Server 向けに最適化された 60 以上の高性能チャートを使用 とグラフを使用して、生データを魅力的な視覚化に変換し、最高の UX を実現します。
Recursos adicionales
Puede encontrar más información sobre las funciones de gráficos relacionadas en estos temas:
Referencias de API
Los componentes IgbCategoryChart
e IgbFinancialChart
comparten las siguientes propiedades de API:
En el componente IgbDataChart
, la mayoría de los tipos de series tienen las siguientes propiedades API: