El siguiente ejemplo muestra todas las opciones de panorámica y zoom disponibles. Puede interactuar con el ejemplo usando los botones o seleccionar las opciones que desee usando los menús desplegables o las casillas de verificación.
EXAMPLE
MODULES
DATA
RAZOR
CSS
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 modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync 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(IgbDataChartFinancialModule),
typeof(IgbDataChartInteractivityModule)
);
await builder.Build().RunAsync();
}
}
}cs
using System;
using System.Collections.Generic;
namespaceInfragistics.Samples
{
publicclassSampleFinancialData
{
publicstatic Random random = new Random();
publicstatic List<SampleFinancialItem> Create(int itemsCount = 365)
{
var data = new List<SampleFinancialItem>();
// initial valuesvar v = 10000.0;
var o = 500.0;
var h = Math.Round(o + (random.NextDouble() * 5));
var l = Math.Round(o - (random.NextDouble() * 5));
var c = Math.Round(l + (random.NextDouble() * (h - l)));
var today = DateTime.Now;
var end = new DateTime(today.Year, 12, 31);
var time = end.AddDays(-itemsCount);
for (var i = 0; i < itemsCount; i++)
{
var date = time.ToShortDateString();
var label = GetShortDate(time, false);
// adding new data itemvar item = new SampleFinancialItem();
item.Time = time;
item.Date = date;
item.Label = label;
item.Close = c;
item.Open = o;
item.High = h;
item.Low = l;
item.Volume = v;
data.Add(item);
// generating new valuesvar mod = random.NextDouble() - 0.49;
o = Math.Round(o + (mod * 5 * 4));
v = Math.Round(v + (mod * 5 * 100));
h = Math.Round(o + (random.NextDouble() * 15));
l = Math.Round(o - (random.NextDouble() * 15));
c = Math.Round(l + (random.NextDouble() * (h - l)));
time = time.AddDays(1);
}
return data;
}
publicstaticstringGetShortDate(DateTime dt, bool showYear)
{
var months = new List<string> {
"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
};
var ind = dt.Month - 1;
var day = dt.Day;
var label = months[ind] + " " + day;
if (showYear)
{
label += " " + dt.Year;
}
return label;
}
}
publicclassSampleFinancialItem
{
publicdouble High { get; set; }
publicdouble Low { get; set; }
publicdouble Open { get; set; }
publicdouble Close { get; set; }
publicdouble Volume { get; set; }
publicstring Label { get; set; }
publicstring Date { get; set; }
public DateTime Time { get; set; }
}
}cs
/*
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 kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas Blazor completo y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.
Navegación de gráficos con interacciones del usuario
El hecho de que el zoom esté activado de forma predeterminada depende del gráfico que esté utilizando. Si está utilizando IgbCategoryChart, está activado de forma predeterminada, pero no está en el IgbDataChart. Para habilitar o deshabilitar la navegación en la interfaz de usuario, debe establecer las IsHorizontalZoomEnabled propiedades y/o del IsVerticalZoomEnabled gráfico, según la dirección en la que desee habilitar o deshabilitar el zoom.
También es posible hacer zoom o desplazarse simplemente haciendo clic con el mouse o usando el tacto. La propiedad DefaultInteraction del gráfico de datos determina lo que sucede al hacer clic con el mouse o al tocar eventos. Esta propiedad tiene como valor predeterminado DragZoom y cuando se establece en esta opción con el zoom habilitado, al hacer clic y arrastrar se colocará un rectángulo de vista previa sobre el área del gráfico que se convertirá en el área ampliada del gráfico. Esta propiedad DefaultInteraction también se puede establecer en DragPan para permitir la panorámica o None para evitar estas operaciones.
Navegación por cartas con toque, mouse y teclado
La navegación en el gráfico de datos Blazor se puede realizar con el tacto, el ratón o el teclado. Las siguientes operaciones se pueden realizar mediante el tacto, el ratón o el teclado de forma predeterminada:
Panorámica: usando las teclas de flecha 🡐 🡒 🡑 🡓 del teclado o manteniendo presionada la tecla Mayús, haciendo clic y arrastrando con el mouse o presionando y moviendo el dedo mediante el tacto.
Acercar: usando la tecla Re Pág del teclado, girando la rueda del mouse hacia arriba o pellizcando para acercar mediante el tacto.
Alejar: use la tecla Av Pág del teclado, gire la rueda del mouse hacia abajo o pellizque para alejar mediante el tacto.
Ajustar al área del gráfico: usando la tecla Inicio en el teclado. No hay operación táctil ni de mouse para esto.
Zoom de área: haga clic y arrastre el mouse dentro del área de trazado con la propiedad DefaultInteraction configurada en su valor predeterminado: DragZoom.
Las operaciones de zoom y panorámica también se pueden habilitar mediante el uso de teclas modificadoras configurando las propiedades DragModifier y PanModifier, respectivamente. Estas propiedades se pueden configurar con las siguientes teclas modificadoras y, al presionarlas, se ejecutará la operación correspondiente:
Valor del modificador
Clave correspondiente
Shift
Cambio
Control
Control
Windows
Ganar
Apple
Manzana
None
sin llaves
Navegación de gráficos con barras de desplazamiento
Estos se pueden configurar con las siguientes opciones.
Persistent: las barras de desplazamiento siempre permanecen visibles, siempre que el gráfico esté ampliado, y desaparecen cuando se reduce por completo.
Fading: las barras de desplazamiento desaparecen después de su uso y reaparecen cuando el mouse está cerca de su ubicación.
FadeToLine: las barras de desplazamiento se reducen a una línea más delgada cuando no se utiliza el zoom.
None: predeterminado, no se muestran barras de desplazamiento.
El siguiente ejemplo demuestra cómo habilitar las barras de desplazamiento.
EXAMPLE
DATA
MODULES
RAZOR
CSS
//begin async datausing System;
using System.Collections.Generic;
using System.Text.Json;
using System.Threading;
using System.Threading.Tasks;
using System.Net.Http;
using System.Collections.ObjectModel;
using IgniteUI.Blazor.Controls;
publicclassMultipleStocks : List<TitledStockData>
{
publicasyncstatic Task<MultipleStocks> Fetch()
{
var google = await MultipleStocks.GetGoogleStock();
var amazon = await MultipleStocks.GetAmazonStock();
var val = new MultipleStocks();
val.Add(google);
val.Add(amazon);
return val;
}
/** gets Amazon stock OHLC prices from a .JSON file */publicasyncstatic Task<TitledStockData> GetAmazonStock()
{
var url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json";
var data = await Fetch(url);
var stockData = ConvertData(data);
stockData[0].Title = "Amazon";
return stockData;
}
/** gets Tesla stock OHLC prices from a .JSON file */publicasyncstatic Task<TitledStockData> GetTeslaStock()
{
var url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json";
var data = await Fetch(url);
var stockData = ConvertData(data);
stockData[0].Title = "Tesla";
return stockData;
}
/** gets Microsoft stock OHLC prices from a .JSON file */publicasyncstatic Task<TitledStockData> GetMicrosoftStock()
{
var url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json";
var data = await Fetch(url);
var stockData = ConvertData(data);
stockData[0].Title = "Microsoft";
return stockData;
}
/** gets Google stock OHLC prices from a .JSON file */publicasyncstatic Task<TitledStockData> GetGoogleStock()
{
var url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json";
var data = await Fetch(url);
var stockData = ConvertData(data);
stockData[0].Title = "Google";
return stockData;
}
privateasyncstatic Task<Dictionary<string, object>[]> Fetch(string url)
{
HttpClient client = new HttpClient();
var str = await client.GetStringAsync(url);
var arr = JsonSerializer.Deserialize<Dictionary<string, object>[]>(str);
return arr;
}
publicstatic TitledStockData ConvertData(Dictionary<string, object>[] arr)
{
var ret = new TitledStockData();
foreach (var json in arr)
{
var date = ((JsonElement)json["date"]).GetString();
var parts = date.Split('-'); // "2020-01-01"var item = new MultipleStocksItem();
item.Date = new DateTime(int.Parse(parts[0]), int.Parse(parts[1]) + 1, int.Parse(parts[2]));
item.Open = ((JsonElement)json["open"]).GetDouble();
item.High = ((JsonElement)json["high"]).GetDouble();
item.Low = ((JsonElement)json["low"]).GetDouble();
item.Close = ((JsonElement)json["close"]).GetDouble();
item.Volume = ((JsonElement)json["volume"]).GetDouble();
ret.Add(item);
}
return ret;
}
}
publicclassMultipleStocksItem
{
[DataSeriesMemberIntent(DataSeriesIntent.SeriesTitle)]
publicstring Title { get; set; }
public DateTime Date { get; set; }
publicdouble Open { get; set; }
publicdouble High { get; set; }
publicdouble Low { get; set; }
publicdouble Close { get; set; }
publicdouble Volume { get; set; }
}
publicclassTitledStockData
: ObservableCollection<MultipleStocksItem>
{
}
//end async datacs
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 modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync 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),
typeof(IgbDataChartInteractivityModule),
typeof(IgbLegendModule)
);
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Navegación de gráficos a través del código
La navegación por código del gráfico solo se puede utilizar para el control IgbDataChart.
El gráfico de datos Blazor ofrece varias propiedades de navegación que se actualizan cada vez que se realiza una operación de zoom o desplazamiento en el gráfico. También puede configurar cada una de estas propiedades para hacer zoom o desplazamiento en el gráfico de datos mediante programación. A continuación, se incluye una lista de estas propiedades:
WindowPositionHorizontal: un valor numérico que describe la porción X del rectángulo de vista de contenido que se muestra en el gráfico de datos.
WindowPositionVertical: un valor numérico que describe la parte Y del rectángulo de vista de contenido que se muestra en el gráfico de datos.
WindowRect: un objeto Rect que representa un rectángulo que representa la parte del gráfico que está actualmente a la vista. Por ejemplo, un WindowRect de "0, 0, 1, 1" sería la totalidad del gráfico de datos.
WindowScaleHorizontal: un valor numérico que describe la parte del ancho del rectángulo de vista de contenido que se muestra en el gráfico de datos.
WindowScaleVertical: un valor numérico que describe la parte de altura del rectángulo de vista de contenido que se muestra en el gráfico de datos.
Recursos adicionales
Puede encontrar más información sobre las funciones de gráficos relacionadas en estos temas: