IgbDataChart ではデータの変更を行った場合は Notify メソッドを実行すると変更が UI に通知されます。
Notify メソッドは変更内容に応じて数種類用意されています。例えば、データコレクション内のある項目の値が変更された場合は、NotifyUpdateItem() を実行します。項目が削除された場合はNotifyRemoveItem()、追加された場合は NotifyInsertItem() を実行します。データの複数の項目に変更があった場合は NotifyClearItems() によってまとめて通知を行うことも可能です。
ここでは、System.Timers.Timer を使用して定期的にデータの更新を行います。

public IgbDataChart? DataChart1 { get; set; }
public List<SampleCategoryItem>? ChartData1 { get; set; }
private System.Timers.Timer? timer;
private Random rnd = new Random();

....

timer = new System.Timers.Timer(1000); //1秒ごとに処理を行う
timer.Elapsed += TimerElapsed;
timer.Start();

System.Timers.TimerのElapsed イベントを以下のように実装します。

private async void TimerElapsed(object? sender, System.Timers.ElapsedEventArgs e)
{
	await InvokeAsync(() =>
	{
		if (ChartData1 == null || DataChart1 == null) return;

		//データの一番目の項目を削除する
		var itemToRemove = ChartData1[0];
		ChartData1.RemoveAt(0);
		DataChart1.NotifyRemoveItem(ChartData1, 0, itemToRemove);
		//新規データ項目を追加する
		var itemToAdd = new SampleCategoryItem { Year = (yearCounter++).ToString(), LineData1 = rnd.Next(50, 200), ColumnData1 = rnd.Next(80, 170) };
		ChartData1.Add(itemToAdd);
		DataChart1.NotifyInsertItem(ChartData1, ChartData1.Count - 1, itemToAdd);

		StateHasChanged();
	});
}
Tagged:

製品について

Ignite UI for Blazor