다음 예에서는 사용 가능한 모든 이동 및 확대/축소 옵션을 보여줍니다. 버튼을 사용하여 예제와 상호 작용하거나 드롭다운 또는 확인란을 사용하여 원하는 옵션을 선택할 수 있습니다.
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으로 설정하여 이러한 작업을 방지할 수도 있습니다.
Chart Navigation with Touch, Mouse and Keyboard
Blazor 데이터 차트의 탐색은 터치, 마우스 또는 키보드로 수행할 수 있습니다. 다음 작업은 기본적으로 터치, 마우스 또는 키보드 작업을 사용하여 호출할 수 있습니다.
패닝: 키보드의 🡐🡒🡑🡓 방향키를 사용하거나, Shift 키를 누른 채 마우스로 클릭하고 드래그하거나, 터치를 통해 손가락을 누르고 이동합니다.
확대: 키보드의 Page Up 키를 이용하거나, 마우스 휠을 위로 굴리거나, 핀치 터치로 확대할 수 있습니다.
축소: 키보드의 Page Down 키를 사용하거나, 마우스 휠을 아래로 굴리거나, 핀치 터치를 통해 축소합니다.
차트 플롯 영역에 맞추기: 키보드의 Home 키를 사용합니다. 이에 대한 마우스나 터치 작업은 없습니다.
영역 확대/축소: DefaultInteraction 속성이 기본값인 DragZoom으로 설정된 플롯 영역 내에서 마우스를 클릭하고 드래그합니다.
DragModifier 및 PanModifier 속성을 각각 설정하여 수정자 키를 사용하여 확대/축소 및 이동 작업을 활성화할 수도 있습니다. 이러한 속성은 다음 수정자 키로 설정할 수 있으며, 누르면 해당 작업이 실행됩니다.
Persistent- 차트가 확대되는 동안 스크롤 막대는 항상 표시되고 완전히 축소되면 사라집니다.
Fading- 사용 후 스크롤바가 사라지고 마우스가 해당 위치 근처에 있으면 다시 나타납니다.
FadeToLine- 확대/축소를 사용하지 않을 때 스크롤 막대가 더 얇은 선으로 줄어듭니다.
None- 기본값, 스크롤바가 표시되지 않습니다.
다음 예에서는 스크롤 막대를 활성화하는 방법을 보여줍니다.
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]),12,0,0);
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
