Ignite UI for Blazor 하면 마우스, 키보드, 터치를 사용하여 대화형 팬 및 확대/축소가 가능합니다.
Blazor 차트 탐색 예제
다음 예에서는 사용 가능한 모든 이동 및 확대/축소 옵션을 보여줍니다. 버튼을 사용하여 예제와 상호 작용하거나 드롭다운 또는 확인란을 사용하여 원하는 옵션을 선택할 수 있습니다.
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
마우스를 클릭하거나 터치를 사용하여 간단히 확대/축소하거나 이동하는 것도 가능합니다. 데이터 차트의 DefaultInteraction 속성은 마우스 클릭 또는 터치 이벤트 발생 시 발생하는 상황을 결정합니다. 이 속성의 기본값은 DragZoom 이며 확대/축소가 활성화된 상태에서 이 속성으로 설정되면 클릭하고 끌면 차트의 확대/축소된 영역이 될 플롯 영역 위에 미리 보기 직사각형이 배치됩니다. 이 DefaultInteraction 속성을 DragPan으로 설정하여 패닝을 허용하거나 None으로 설정하여 이러한 작업을 방지할 수도 있습니다.
터치, 마우스, 키보드를 사용한 차트 탐색
Blazor 데이터 차트의 탐색은 터치, 마우스 또는 키보드로 수행할 수 있습니다. 다음 작업은 기본적으로 터치, 마우스 또는 키보드 작업을 사용하여 호출할 수 있습니다.
이동: 키보드의 화살표 키를 사용 🡐 🡓 🡒 🡑 하거나 키를 누른 상태 SHIFT에서 마우스로 클릭하고 드래그하거나 터치를 통해 손가락을 누르고 움직입니다.
확대: 키보드의 키를 사용 PAGE UP 하거나, 마우스 휠을 위로 올리거나, 손가락을 모아 터치를 통해 확대합니다.
축소: 키보드의 키를 사용 PAGE DOWN 하거나, 마우스 휠을 아래로 굴리거나, 터치를 통해 손가락을 모아 축소합니다.
차트 플롯 영역에 맞추 기: 키보드의 키를 사용합니다 HOME. 이에 대한 마우스 또는 터치 조작은 없습니다.
영역 확대/축소: DefaultInteraction 속성이 기본값인 DragZoom으로 설정된 플롯 영역 내에서 마우스를 클릭하고 드래그합니다.
DragModifier 및 PanModifier 속성을 각각 설정하여 수정자 키를 사용하여 확대/축소 및 이동 작업을 활성화할 수도 있습니다. 이러한 속성은 다음 수정자 키로 설정할 수 있으며, 누르면 해당 작업이 실행됩니다.