こんにちは。インフラジスティックス・ジャパン テクニカルコンサルティングチームの石橋です。
このブログシリーズでは、「Blazor で棒グラフを作成しよう」というタイトルで
- Blazor の新規アプリケーション作成 (Hello, world!)
- Ignite UI for Blazor を使った棒グラフの表示 (※今回はここ)
- 棒グラフが最適なデータとは
- 棒グラフでやらないほうがよいこと
の 4 つを順に説明していきます。
今回は、2 つめ「Ignite UI for Blazor を使った棒グラフの表示」です。Ignite UI for Blazor は、インフラジスティックスが開発、販売している製品で、Blazor で動作する UI コンポーネントおよびライブラリーをまとめたものです。Ignite UI for Blazor で棒グラフを表示するには、IgbDataChart コンポーネントや IgbCategoryChart コンポーネントを使います。今回は、IgbDataChart コンポーネントを使用してみましょう。
1 つめの記事で作成した Hello, world! のアプリケーションを拡張していきます。まだ作成していない場合は、1 つめの記事を参考にしながら Blazor WebAssembly のテンプレート アプリケーションの作成まで完了してから読み進めてください。
- Ignite UI for Blazor の棒グラフ作成に必要な NuGet パッケージをインストールする
- Ignite UI for Blazor の登録
- データを用意する
- IgbDataChart コンポーネントを画面に追加する
- NavMenu Razor コンポーネントを書き換える
- 実行してみる
- 最後に
Ignite UI for Blazor の棒グラフ作成に必要な NuGet パッケージをインストールする
NuGet パッケージ ソースを設定する
製品版の NuGet パッケージ ソースを設定します (すでに製品版の NuGet パッケージ ソースを設定している人はこのセクションを読み飛ばして「IgnietUI.Blazor NuGet パッケージをプロジェクトにインストールする」に進んでください)。
1. Visual Studio で [ツール] → [NuGet パッケージ マネージャー] → [パッケージ マネージャー設定] を選択します。
2. [パッケージ ソース] セクションで、ダイアログの右上にある [+] アイコンをクリックして新しいパッケージ ソースを追加します。
- 名前を Infragistics private feed に設定します。
- ソースを https://packages.infragistics.com/nuget/licensed に設定します。
3. [更新] ボタンをクリックし、[OK] をクリックしてダイアログを閉じます。
※アクティブなサブスクリプションを持っていない場合は 30 日間のサポート付きトライアル版をご利用ください。
Ignite UI for Blazor 無料トライアル版のダウンロード
IgnietUI.Blazor NuGet パッケージをプロジェクトにインストールする
1. ソリューションまたはプロジェクトを右クリックし、[ソリューションの NuGet パッケージの管理] を選択します。
2. パッケージ マネージャー ダイアログで [参照] タブを開き、Infragistics パッケージ ソースを選択して IgniteUI.Blazor NuGet パッケージをプロジェクトにインストールします。
前段で設定したパッケージ ソースを選択してください。
[インストール] をクリックした際に Infragistics の認証を求められた場合は、インフラジスティックスのカスタマー ポータルにサインインするときに使用しているメールアドレスとパスワードを入力してください。
IgniteUI.Blazor NuGet パッケージがプロジェクトにインストールされているか確認する
以上で IgniteUI.Blazor NuGet パッケージのインストールが完了です。インストールされているか確認してみましょう。[ソリューション エクスプローラー] の [依存関係] → [パッケージ] と展開していき、IgniteUI.Blazor がそこにあれば OK です。
Ignite UI for Blazor の登録
次に、Ignite UI for Blazor をアプリケーションに登録する必要があります。
1. Program.cs ファイルを開き、builder.Services.AddIgniteUIBlazor() を呼び出して Ignite UI for Blazor サービスを登録します。
// Program.cs
using ColumnChartInBlazor;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddIgniteUIBlazor(); // ←追加するのはここです。
await builder.Build().RunAsync();
2. IgniteUI.Blazor.Controls 名前空間を _Imports.razor ファイルに追加します。
@*_Imports.razor*@ @using System.Net.Http @using System.Net.Http.Json @using Microsoft.AspNetCore.Components.Forms @using Microsoft.AspNetCore.Components.Routing @using Microsoft.AspNetCore.Components.Web @using Microsoft.AspNetCore.Components.Web.Virtualization @using Microsoft.AspNetCore.Components.WebAssembly.Http @using Microsoft.JSInterop @using ColumnChartInBlazor @using ColumnChartInBlazor.Shared @using IgniteUI.Blazor.Controls @*←追加するのはここです。*@
3. wwwroot/index.html ファイルの要素にスタイル シートを追加します。
<!-- wwwroot/index.html -->
<head>
...
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
...
</head>
ここまでで Igniet UI for Blazor を利用するための下準備ができました。
データを用意する
次に、棒グラフに表示するデータを用意します。今回は、営業部門の売上成績を想定した以下のサンプルデータを使います。
| 担当者名 | 成績 (単位: 百万円) |
|---|---|
| 茂木 | 87.4 |
| 滝沢 | 31.8 |
| 東海林 | 67.3 |
| 丸山 | 65.4 |
| 長谷川 | 83.5 |
| 松山 | 154.8 |
| 沢村 | 105.6 |
| 神保 | 67.7 |
| 木田 | 57.9 |
| 勝田 | 85 |
アプリケーション ルートに Services フォルダーを作成し、SampleSalesResults.cs クラスを新規追加する
1. Visual Studio のソリューション エクスプローラーでアプリケーション ルートの ColumnChartInBlazor を右クリックし、[追加] → [新しいフォルダー] を選択し、Services フォルダーを作成します。
2. 1 で作成した Services フォルダーを右クリックし、[追加] → [クラス] を選択します。
3. [新しい項目の追加] ダイアログの [名前] に SampleSalesResults.cs と入力し、[追加] をクリックします。
SampleSalesResults.csが追加されました。
※Visual Studioの構成によっては、ファイルスコープ名前空間でクラスが作成され場合があります（下記図参照）。今回は、このまま従来の書き方でサンプルを作成していきますが、ファイルスコープ名前空間での書き方でも同義で、全く問題なく書き進められます。
4. 3で作成したSampleSalesResults.csを開き、次のコードをコピー＆ペーストします。
namespace ColumnChartInBlazor.Services
{
public class SampleSalesResults
{
public static List<SalesResult> Create()
{
List<SalesResult> _results = new()
{
new() { Name = "茂木", Result = 87.4 },
new() { Name = "滝沢", Result = 31.8 },
new() { Name = "東海林", Result = 67.3 },
new() { Name = "丸山", Result = 65.4 },
new() { Name = "長谷川", Result = 83.5 },
new() { Name = "松山", Result = 154.8 },
new() { Name = "沢村", Result = 105.6 },
new() { Name = "神保", Result = 67.7 },
new() { Name = "木田", Result = 57.9 },
new() { Name = "勝田", Result = 85 }
};
return _results;
}
}
public class SalesResult
{
public double Result { get; set; }
public string? Name { get; set; }
}
}
これで表示するデータが用意できました。
IgbDataChart コンポーネントを画面に追加する
いよいよ IgbDataChart コンポーネントを画面に追加していきます。
MyColumnChart Razor コンポーネントを追加する
1. Visual Studio のソリューション エクスプローラーで [Pages] を右クリックし、[追加] → [Razor コンポーネント] を選択します。
2. [新しい項目の追加] ダイアログの [名前] に MyColumnChart.razor と入力し、[追加] をクリックします。
これで、MyColumnChart Razor コンポーネントがファイル名 MyColumnChart.razor で Pages の下に追加されました。
IgbDataChart コンポーネントを画面に置く
1. MyColumnChart Razor コンポーネントを開き、以下のコードをコピー＆ペーストします。
@*Pages\MyColumnChart.razor*@
@page "/mycolumnchart"
@using ColumnChartInBlazor.Services
<h3>MyColumnChart</h3>
<div>
@*IgbDataChartを置く*@
<IgbDataChart Height="400px" Width="800px"
ChartTitle="売上成績"
Subtitle="2022 年 6 月度"
Legend="Legend">
@*X 軸の設定*@
<IgbCategoryXAxis Name="xAxis" Label="Name" DataSource="Data"
Title="担当者" Gap="0.2" />
@*Y 軸の設定*@
<IgbNumericYAxis Name="yAxis" Title="成績 (単位: 百万円)" TitleLeftMargin="10" MinimumValue="0" />
@*表示するデータの設定*@
<IgbColumnSeries Name="series1"
Title="2022 年 6 月度"
ValueMemberPath="Result"
XAxisName="xAxis"
YAxisName="yAxis"
DataSource="Data">
</IgbColumnSeries>
</IgbDataChart>
</div>
<div class="legend">
@*凡例を置く*@
<IgbLegend @ref="Legend" Orientation="LegendOrientation.Horizontal" />
</div>
@code {
private List<SalesResult>? Data;
private IgbLegend? legend;
private IgbLegend? Legend
{
get { return legend; }
set
{
legend = value;
StateHasChanged();
}
}
protected override void OnInitialized()
{
// データを生成する。
Data = SampleSalesResults.Create();
}
}
NavMenu Razor コンポーネントを書き換える
NavMenu に棒グラフの画面を表示するリンクを追加しましょう。
1. NavMenu Razor コンポーネントを開き、MyColumnChart Razor コンポーネントに遷移するリンクを追加します。
@*Shared\NavMenu.razor*@
@* ... (省略) ... *@
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<nav class="flex-column">
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="counter">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="fetchdata">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</NavLink>
</div>
@*追加するのはこの↓ div タグです。*@
<div class="nav-item px-3">
<NavLink class="nav-link" href="mycolumnchart">
<span class="oi oi-bar-chart" aria-hidden="true"></span> My Column Chart
</NavLink>
</div>
</nav>
</div>
@* ... (省略) ... *@
実行してみる
これですべて実装できました。Visual Studio でアプリケーションを実行してみましょう。ブラウザーが立ち上がり、Hello, world! の画面が表示されたら、左側のメニューにある [My Column Chart] をクリックします。
棒グラフが表示されました!
最後に
以上、Blazor WebAssembly のひな形 Hello, world! に Ignite UI for Blazor の棒グラフが表示されるまでを見てきました。次回は、一般的な話として、棒グラフが最適なデータについてと、棒グラフでやらないほうがいいことについて、紹介します。
今回ご覧いただいたサンプルはGitHubでコードを配布しております。
GitHub - igjp-sample/igbDataChart-columnChart-2
この記事に関して何かご質問・ご不明な点がありましたら、お気兼ねなくインフラジスティックスまでお問い合わせください。
