Ignite UI for Blazor で棒グラフを作成しよう - ② Ignite UI for Blazor を使った棒グラフの表示

こんにちは。インフラジスティックス・ジャパンテクニカルコンサルティングチームの石橋です。

このブログシリーズでは、「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 の登録
データを用意する
- アプリケーションルートに Services フォルダーを作成し、SampleSalesResults.cs クラスを新規追加する
IgbDataChart コンポーネントを画面に追加する
- MyColumnChart Razor コンポーネントを追加する
- 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>
@* ... (省略) ... *@