Blazor 円チャート

Ignite UI for Blazor 円チャート (円グラフ) は、データセットのカテゴリ (部分) が合計 (全体) 値になる方法を示す部分対全体チャートです。カテゴリは、円グラフまたは円グラフのセクションとして描画されます。各セクション (円スライス) は基本データ値に比例する円弧の長さを持ちます。カテゴリは、分析中の合計値に対する値の割合に基づいて、100 または 100% の部分として他のカテゴリに比例して表示されます。

Blazor 円チャートの例

データ項目を文字列と数値データでバインドすることで、IgbPieChart の円チャートが作成できます。これらのデータ値を足すと可視化率 100% になります。この例では部門ごとの予算支出の全体的な内訳を示しています。

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 modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async 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(IgbItemLegendModule),
                typeof(IgbPieChartModule)
            );
            await builder.Build().RunAsync();
        }
    }
}cs

using System;
using System.Collections.Generic;
public class EnergyGlobalDemandItem
{
    public double Value { get; set; }
    public string Category { get; set; }
    public string Summary { get; set; }
}

public class EnergyGlobalDemand
    : List<EnergyGlobalDemandItem>
{
    public EnergyGlobalDemand()
    {
        this.Add(new EnergyGlobalDemandItem()
        {
            Value = 37,
            Category = @"Cooling",
            Summary = @"Cooling 37%"
        });
        this.Add(new EnergyGlobalDemandItem()
        {
            Value = 25,
            Category = @"Residential",
            Summary = @"Residential 25%"
        });
        this.Add(new EnergyGlobalDemandItem()
        {
            Value = 12,
            Category = @"Heating",
            Summary = @"Heating 12%"
        });
        this.Add(new EnergyGlobalDemandItem()
        {
            Value = 11,
            Category = @"Lighting",
            Summary = @"Lighting 11%"
        });
        this.Add(new EnergyGlobalDemandItem()
        {
            Value = 15,
            Category = @"Other",
            Summary = @"Other 15%"
        });
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="legend-title">
        Global Electricity Demand by Energy Use
    </div>
    <div class="legend">
        <IgbItemLegend
        Name="legend"
        @ref="legend"
        Orientation="LegendOrientation.Horizontal">
        </IgbItemLegend>

    </div>
    <div class="container vertical fill">
        <IgbPieChart
        Name="chart"
        @ref="chart"
        LegendLabelMemberPath="Category"
        LabelMemberPath="Summary"
        LabelsPosition="LabelsPosition.BestFit"
        ValueMemberPath="Value"
        RadiusFactor="0.7"
        DataSource="EnergyGlobalDemand">
        </IgbPieChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var legend = this.legend;
        var chart = this.chart;

        this.BindElements = () => {
            chart.Legend = this.legend;
        };
        this.BindElements();

    }

    private IgbItemLegend legend;
    private IgbPieChart chart;

    private EnergyGlobalDemand _energyGlobalDemand = null;
    public EnergyGlobalDemand EnergyGlobalDemand
    {
        get
        {
            if (_energyGlobalDemand == null)
            {
                _energyGlobalDemand = new EnergyGlobalDemand();
            }
            return _energyGlobalDemand;
        }
    }

}razor

/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css

このサンプルが気に入りましたか? 完全な Ignite UI for Blazorツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

Blazor 円チャートの推奨事項

円チャートは小さいデータセットに適していて、一目で読みやすくなります。円チャートは、部分対全体の可視化の一種です。その他:

円
ドーナツ (リング)
ファンネル
積層型エリア
積層型 100% エリア (積層型パーセントエリア)
積層型棒
積層型 100% 棒 (積層型パーセント棒)
ツリーマップ
ウォーターフォール

Blazor 円チャートは、データを解析するためのビューアーツールを提供するインタラクティブ機能を含みます。

凡例
スライスの分割
スライスの選択
チャートアニメーション

円チャートのベストプラクティス:

スライスまたはセグメントを、合計値または全体に対するパーセンテージ値として比較する。
カテゴリのグループがどのようにより小さなセグメントに分割されるかを表示する。
小さい非階層データセット (6 ～ 8 セグメント未満のデータ) を表示する。
データセグメントの合計が 100% になるようにする。
データの順序を最大 (最高) から最小 (最低) に並べ替える。
12 時の位置から始めて時計回りに進む標準的なプレゼンテーション方法を使用する。
カラーパレットがセグメント/スライスで識別できるようにする。
データラベルを読みやすくするため、セグメントと凡例のどちらに配置するべきか検討する。
より分かりやすい表現のために、円の代わりに棒またはリングチャートを選択する。
比較分析のために複数の円チャートを並べて配置しないようにする。

以下の場合に円チャートを使用しないでください。

経時変化を比較する場合 - 棒チャート、折れ線チャート、またはエリアチャートを使用してください。
正確なデータ比較が必要な場合 - 棒チャート、折れ線チャート、またはエリアチャートを使用してください。
6 セグメントまたは 8 セグメント (大量のデータ) がある場合 - データストーリーに適した棒チャート、折れ線チャート、またはエリアチャートを検討してください。
棒チャートで値の違いがわかりやすくなります。

Blazor 円チャートの凡例

凡例は、各ポイントに関する情報を表示し、そのポイントの合計に対する割合を示します凡例クリックを使用してポイントを縮小できます。

円チャートコンポーネントの隣に凡例を表示するには、ItemLegend を作成し、Legend プロパティに割り当てます。LegendLabelMemberPath は、各円スライスの凡例項目を表示するために使用するデータモデルのプロパティを指定します。

また、凡例項目の外観をカスタマイズするために LegendItemTemplate および LegendItemBadgeTemplateプロパティ、IgbItemLegend の複数のフォントプロパティも使用できます。

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 modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async 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(IgbItemLegendModule),
                typeof(IgbPieChartModule)
            );
            await builder.Build().RunAsync();
        }
    }
}cs

using System;
using System.Collections.Generic;
public class EnergyGlobalDemandItem
{
    public double Value { get; set; }
    public string Category { get; set; }
    public string Summary { get; set; }
}

public class EnergyGlobalDemand
    : List<EnergyGlobalDemandItem>
{
    public EnergyGlobalDemand()
    {
        this.Add(new EnergyGlobalDemandItem()
        {
            Value = 37,
            Category = @"Cooling",
            Summary = @"Cooling 37%"
        });
        this.Add(new EnergyGlobalDemandItem()
        {
            Value = 25,
            Category = @"Residential",
            Summary = @"Residential 25%"
        });
        this.Add(new EnergyGlobalDemandItem()
        {
            Value = 12,
            Category = @"Heating",
            Summary = @"Heating 12%"
        });
        this.Add(new EnergyGlobalDemandItem()
        {
            Value = 11,
            Category = @"Lighting",
            Summary = @"Lighting 11%"
        });
        this.Add(new EnergyGlobalDemandItem()
        {
            Value = 15,
            Category = @"Other",
            Summary = @"Other 15%"
        });
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="legend-title">
        Global Electricity Demand by Energy Use
    </div>
    <div class="legend">
        <IgbItemLegend
        Name="legend"
        @ref="legend"
        Orientation="LegendOrientation.Horizontal">
        </IgbItemLegend>

    </div>
    <div class="container vertical fill">
        <IgbPieChart
        Name="chart"
        @ref="chart"
        ValueMemberPath="Value"
        LabelMemberPath="Summary"
        LabelsPosition="LabelsPosition.OutsideEnd"
        LegendLabelMemberPath="Category"
        Outlines="white"
        RadiusFactor="0.7"
        LabelExtent="30"
        DataSource="EnergyGlobalDemand">
        </IgbPieChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var legend = this.legend;
        var chart = this.chart;

        this.BindElements = () => {
            chart.Legend = this.legend;
        };
        this.BindElements();

    }

    private IgbItemLegend legend;
    private IgbPieChart chart;

    private EnergyGlobalDemand _energyGlobalDemand = null;
    public EnergyGlobalDemand EnergyGlobalDemand
    {
        get
        {
            if (_energyGlobalDemand == null)
            {
                _energyGlobalDemand = new EnergyGlobalDemand();
            }
            return _energyGlobalDemand;
        }
    }

}razor

/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css

Blazor 円チャートその他の分類項目

円チャートコンポーネントの基本データに、小さい値を含む多くの項目が含まれる場合があります。この場合、Others カテゴリは、単一スライスへの複数のデータ値の自動集計を許可します。

以下のサンプルは、OthersCategoryThreshold を 2 に設定、OthersCategoryType は Number に設定されています。したがって、2 以下の値を含む項目は、Others カテゴリに割り当てられます。

OthersCategoryType を Percent に設定すると、OthersCategoryThreshold は値ではなくパーセンテージとして解釈されます。つまり、値がすべての項目の値の合計の 2% 未満である項目は、Others カテゴリに割り当てられます。使用しているアプリケーションに最も適切な OthersCategoryType を使用できます。

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 modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async 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(IgbItemLegendModule),
                typeof(IgbPieChartModule)
            );
            await builder.Build().RunAsync();
        }
    }
}cs

using System;
using System.Collections.Generic;
public class EnergyGlobalDemandItem
{
    public double Value { get; set; }
    public string Category { get; set; }
    public string Summary { get; set; }
}

public class EnergyGlobalDemand
    : List<EnergyGlobalDemandItem>
{
    public EnergyGlobalDemand()
    {
        this.Add(new EnergyGlobalDemandItem()
        {
            Value = 37,
            Category = @"Cooling",
            Summary = @"Cooling 37%"
        });
        this.Add(new EnergyGlobalDemandItem()
        {
            Value = 25,
            Category = @"Residential",
            Summary = @"Residential 25%"
        });
        this.Add(new EnergyGlobalDemandItem()
        {
            Value = 12,
            Category = @"Heating",
            Summary = @"Heating 12%"
        });
        this.Add(new EnergyGlobalDemandItem()
        {
            Value = 11,
            Category = @"Lighting",
            Summary = @"Lighting 11%"
        });
        this.Add(new EnergyGlobalDemandItem()
        {
            Value = 15,
            Category = @"Other",
            Summary = @"Other 15%"
        });
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="legend-title">
        Global Electricity Demand by Energy Use
    </div>
    <div class="legend">
        <IgbItemLegend
        Name="legend"
        @ref="legend"
        Orientation="LegendOrientation.Horizontal">
        </IgbItemLegend>

    </div>
    <div class="container vertical fill">
        <IgbPieChart
        Name="chart"
        @ref="chart"
        LabelMemberPath="Summary"
        LabelsPosition="LabelsPosition.OutsideEnd"
        LabelExtent="30"
        ValueMemberPath="Value"
        Outlines="white"
        OthersCategoryThreshold="10"
        OthersCategoryType="OthersCategoryType.Number"
        OthersCategoryText="Others"
        RadiusFactor="0.7"
        LegendLabelMemberPath="Category"
        DataSource="EnergyGlobalDemand">
        </IgbPieChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var legend = this.legend;
        var chart = this.chart;

        this.BindElements = () => {
            chart.Legend = this.legend;
        };
        this.BindElements();

    }

    private IgbItemLegend legend;
    private IgbPieChart chart;

    private EnergyGlobalDemand _energyGlobalDemand = null;
    public EnergyGlobalDemand EnergyGlobalDemand
    {
        get
        {
            if (_energyGlobalDemand == null)
            {
                _energyGlobalDemand = new EnergyGlobalDemand();
            }
            return _energyGlobalDemand;
        }
    }

}razor

/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css

Blazor 円チャートの展開

円チャートコンポーネントは個々の円スライスの選択と展開だけでなく、選択状態を変更しカスタムロジックを実装することを可能にする SliceClick イベントをコンポーネントサポートします。

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 modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async 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(IgbItemLegendModule),
                typeof(IgbPieChartModule)
            );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="options vertical">
        <span class="legend-title">Global Electricity Demand by Energy Use</span>
        <div class="legend">
            <IgbItemLegend @ref="Legend" Orientation="LegendOrientation.Horizontal" />
        </div>
        <div class="overlay-right">
            <div class="options horizontal">
                <label class="options-label">
                    <input type="checkbox" @onchange="onExplosionModeChanged"
                           checked="@ExplodeMultipleSlices"/>Allow Multi-Slice Explosion
                </label>
            </div>
        </div>
    </div>

    <div class="container vertical">

        @if (Data != null)
        {
            <IgbPieChart Height="100%" Width="100%"
                      DataSource="Data"
                      Legend="Legend"
                      LabelMemberPath="Summary"
                      LegendLabelMemberPath="Category"
                      ValueMemberPath="MarketShare"
                      Outlines="white"
                      RadiusFactor="0.7"
                      StartAngle="0"
                      SliceClick="OnSliceClick"
                      LabelsPosition="LabelsPosition.OutsideEnd"
                      LabelExtent="10"
                      AllowSliceSelection="false"
                      AllowSliceExplosion="true"
                      ExplodedSlices="ExplodedSlices"
                      ExplodedRadius="0.1">
            </IgbPieChart>
        }

    </div>
</div>

@code {

    private List<DataItem> Data;

    private IgbItemLegend _legend;
    public IgbItemLegend Legend
    {
        get { return _legend; }
        set { _legend = value; StateHasChanged(); }
    }

    public int[] ExplodedSlices { get; set; } = new int[1];
    public bool ExplodeMultipleSlices = true;

    protected override void OnInitialized()
    {

        this.Data = new List<DataItem>();
        this.Data.Add(new DataItem { MarketShare = 37, Category = "Cooling", });
        this.Data.Add(new DataItem { MarketShare = 25, Category = "Residential", });
        this.Data.Add(new DataItem { MarketShare = 12, Category = "Heating", });
        this.Data.Add(new DataItem { MarketShare = 11, Category = "Lighting", });
        this.Data.Add(new DataItem { MarketShare = 15, Category = "Other", });
    }

    public class DataItem
    {
        public string Category { get; set; }
        public double MarketShare { get; set; }
        public string Summary { get { return Category + " " + MarketShare + "%"; } }
    }

    private void onExplosionModeChanged(ChangeEventArgs args)
    {
        this.ExplodeMultipleSlices = (bool)args.Value;
    }

    protected void OnSliceClick(IgbSliceClickEventArgs e)
    {
        var slice = e.Index;

        if (ExplodedSlices.Contains(slice))
        {
            if (ExplodeMultipleSlices)
            {
                var list = ExplodedSlices.ToList(); list.Remove(slice);
                ExplodedSlices = list.ToArray();
            }
            else
            {
                ExplodedSlices = new int[] { e.Index }; // for single selection
            }
        }
        else
        {
            if (ExplodeMultipleSlices)
            {
                var list = ExplodedSlices.ToList(); list.Add(slice);
                ExplodedSlices = list.ToArray();
            }
            else
            {
                ExplodedSlices = new int[] { e.Index }; // for single selection
            }

        }
    }

}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

Blazor 円チャートの選択

デフォルトで、円チャートはマウスクリックによるスライス選択をサポートします。選択されたスライスは、SelectedItems プロパティで取得します。選択したスライスがハイライト表示されます。

円チャートのモードは SelectionMode プロパティで設定します。デフォルト値は Single です。選択機能を無効化するためにはプロパティを Manual に設定します。

円チャートコンポーネントは、選択モードを 3 つコンポーネントサポートします。

Single - single モードに設定すると、一度に 1 つのスライスのみ選択します。他のスライスを選択すると、最初に選択したスライスは選択解除され、新しいスライスが選択されます。
Multiple - Multiple モードに設定すると、一度に複数のスライスを選択します。スライスをクリックするとスライスが選択され、他のスライスをクリックすると、最初のスライスも、新しくクリックしたスライスも選択されます。
手動 - Manual モードに設定すると、選択は無効化されます。

円チャートコンポーネントには、選択機能に関連する 4 つのイベントがあります。

SelectedItemChanging
SelectedItemChanged
SelectedItemsChanging
SelectedItemsChanged

「Changing」で終わるイベントはキャンセル可能なイベントです。すなわち、イベント引数プロパティ Cancel を true に設定することで、スライスの選択を停止します。True に設定すると、関連付けられたプロパティは更新されず、その結果スライスは選択されません。この設定はたとえば、スライスのデータによって一定のスライスの選択を無効化する場合に使用します。

「その他」スライスをクリックすると、IgbPieSliceOthersContext オブジェクトが返されます。オブジェクトは、「その他」スライスに含まれるデータ項目のリストがあります。

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 modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async 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(IgbItemLegendModule),
                typeof(IgbPieChartModule)
            );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="options vertical">
        <span class="legend-title">Global Electricity Demand by Energy Use</span>
        <div class="legend">
            <IgbItemLegend @ref="Legend" Orientation="LegendOrientation.Horizontal" />
        </div>
    </div>

    <div class="container vertical">
        @if (Data != null)
        {
            <IgbPieChart Height="calc(100% - 2rem)" Width="calc(100% - 2rem)"
                      Legend="Legend"
                      DataSource="Data"
                      LegendLabelMemberPath="Category"
                      LabelMemberPath="Summary"
                      LabelsPosition="LabelsPosition.OutsideEnd"
                      LabelExtent="30"
                      ValueMemberPath="MarketShare"
                      Outlines="#FFFFFF"
                      SelectionMode="SliceSelectionMode.Multiple"
                      SelectedSliceStroke="#FFFFFF"
                      SelectedSliceFill="#8F8F8F"
                      SelectedSliceOpacity="1.0"
                      SelectedSliceStrokeThickness="2"
                      RadiusFactor="0.7"
                      StartAngle="0">
            </IgbPieChart>
        }
    </div>
</div>

@code {

    private List<DataItem> Data;

    private IgbItemLegend _legend;
    public IgbItemLegend Legend
    {
        get { return _legend; }
        set { _legend = value; StateHasChanged(); }
    }

    protected override void OnInitialized()
    {

        this.Data = new List<DataItem>();
        this.Data.Add(new DataItem { MarketShare = 37, Category = "Cooling", });
        this.Data.Add(new DataItem { MarketShare = 25, Category = "Residential", });
        this.Data.Add(new DataItem { MarketShare = 12, Category = "Heating", });
        this.Data.Add(new DataItem { MarketShare = 11, Category = "Lighting", });
        this.Data.Add(new DataItem { MarketShare = 15, Category = "Other", });
    }

    public class DataItem
    {
        public string Category { get; set; }
        public double MarketShare { get; set; }
        public string Summary { get { return Category + " " + MarketShare + "%"; } }
    }
}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

Blazor 円チャートのアニメーション

チャートの半径をスケールする radiusFactor プロパティを設定して円チャートをすばやくアニメーション化できます。startAngle プロパティを設定してチャートが回転する間、チャートの角度が増加し続けるようにします。

以下のコードでは、radiusFactor がチャートをサイズの 0.25% 増加し、startAngle がチャートを 1 度回転しています。radiusFactor と startAngle が最大値に達すると、アニメーションフラグをリセットし、間隔をクリアしてアニメーションを停止します。

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 modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async 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(IgbItemLegendModule),
                typeof(IgbPieChartModule)
            );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="options horizontal">
        <button @onclick="onAnimationToggle">Animate Chart</button>
    </div>
    <div class="container vertical">
        @if (Data != null)
        {
            <IgbPieChart Height="100%" Width="100%"
                DataSource="Data"
                LabelMemberPath="Summary"
                LegendLabelMemberPath="Category"
                ValueMemberPath="MarketShare"
                LabelsPosition="LabelsPosition.InsideEnd"
                StartAngle="StartAngle"
                LabelExtent="LabelExtent"
                RadiusFactor="RadiusFactor">
            </IgbPieChart>
        }
    </div>
</div>

@code {

    private List<DataItem> Data;
    public double StartAngle = 0;
    public double RadiusFactor = 0.1;
    public double LabelExtent = 0.7;
    public Boolean isAnimating = false;

    public void onAnimationToggle()
    {
        if (!this.isAnimating)
        {
            this.StartAngle = 0;
            this.RadiusFactor = 0.1;
            this.isAnimating = true;

            Task.Delay(16).ContinueWith((t) => OnTimerTick());
        }
        else
        {
            this.isAnimating = false;
        }
    }

    private void OnTimerTick()
    {
        if (this.isAnimating)
        {
            if (this.RadiusFactor < 1.0)
                this.RadiusFactor += 0.0025;

            if (this.StartAngle < 360)
                this.StartAngle++;

            if (this.RadiusFactor >= 1.0 &&
                this.StartAngle >= 360)
            {
                this.isAnimating = false;
            }

            Task.Delay(16).ContinueWith((t) => OnTimerTick());
            this.StateHasChanged();
        }
    }

    protected override void OnInitialized()
    {

        this.Data = new List<DataItem>();
        this.Data.Add(new DataItem { MarketShare = 37, Category = "Cooling", });
        this.Data.Add(new DataItem { MarketShare = 25, Category = "Residential", });
        this.Data.Add(new DataItem { MarketShare = 12, Category = "Heating", });
        this.Data.Add(new DataItem { MarketShare = 11, Category = "Lighting", });
        this.Data.Add(new DataItem { MarketShare = 15, Category = "Other", });

        this.onAnimationToggle();
    }

    public class DataItem
    {
        public string Category { get; set; }
        public double MarketShare { get; set; }
        public string Summary { get { return Category + " " + MarketShare + "%"; } }
    }
}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

Blazor 円チャートのスタイル設定

円チャートを作成したら、次に示すように、チャートのスライスの色を変更するなど、スタイルをさらにカスタマイズすることができます。

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 modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async 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(IgbPieChartModule),
                typeof(IgbItemLegendModule)
            );
            await builder.Build().RunAsync();
        }
    }
}cs

using System;
using System.Collections.Generic;
public class EnergyGlobalDemandItem
{
    public double Value { get; set; }
    public string Category { get; set; }
    public string Summary { get; set; }
}

public class EnergyGlobalDemand
    : List<EnergyGlobalDemandItem>
{
    public EnergyGlobalDemand()
    {
        this.Add(new EnergyGlobalDemandItem()
        {
            Value = 37,
            Category = @"Cooling",
            Summary = @"Cooling 37%"
        });
        this.Add(new EnergyGlobalDemandItem()
        {
            Value = 25,
            Category = @"Residential",
            Summary = @"Residential 25%"
        });
        this.Add(new EnergyGlobalDemandItem()
        {
            Value = 12,
            Category = @"Heating",
            Summary = @"Heating 12%"
        });
        this.Add(new EnergyGlobalDemandItem()
        {
            Value = 11,
            Category = @"Lighting",
            Summary = @"Lighting 11%"
        });
        this.Add(new EnergyGlobalDemandItem()
        {
            Value = 15,
            Category = @"Other",
            Summary = @"Other 15%"
        });
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="legend-title">
        Global Electricity Demand by Energy Use
    </div>
    <div class="legend">
        <IgbItemLegend
        Name="legend"
        @ref="legend"
        Orientation="LegendOrientation.Horizontal">
        </IgbItemLegend>

    </div>
    <div class="container vertical fill">
        <IgbPieChart
        Name="chart"
        @ref="chart"
        LegendLabelMemberPath="Category"
        ValueMemberPath="Value"
        LabelMemberPath="Summary"
        LabelsPosition="LabelsPosition.OutsideEnd"
        LabelExtent="30"
        Brushes="#f7d262 #a8a8b7 #e051a9 #f8a15f #735656"
        Outlines="white"
        RadiusFactor="0.7"
        StartAngle="0"
        DataSource="EnergyGlobalDemand">
        </IgbPieChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var legend = this.legend;
        var chart = this.chart;

        this.BindElements = () => {
            chart.Legend = this.legend;
        };
        this.BindElements();

    }

    private IgbItemLegend legend;
    private IgbPieChart chart;

    private EnergyGlobalDemand _energyGlobalDemand = null;
    public EnergyGlobalDemand EnergyGlobalDemand
    {
        get
        {
            if (_energyGlobalDemand == null)
            {
                _energyGlobalDemand = new EnergyGlobalDemand();
            }
            return _energyGlobalDemand;
        }
    }

}razor

/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css

Blazor ラジアル円チャート

ラジアル円チャートはラジアルチャートのグループに属し、チャートの中心からデータポイントの位置に向かって伸びる円スライスを使用します。このチャートタイプは、複数の一連のデータポイントを分類するという概念を採用しており、データポイントを水平線に沿って引き伸ばすのではなく、円形の軸に沿ってラップします。

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 modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async 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(IgbLegendModule),
                typeof(IgbDataChartCoreModule),
                typeof(IgbDataChartRadialModule),
                typeof(IgbDataChartRadialCoreModule),
                typeof(IgbDataChartInteractivityModule),
                typeof(IgbDataChartAnnotationModule)
            );
            await builder.Build().RunAsync();
        }
    }
}cs

using System;
using System.Collections.Generic;
public class FootballPlayerStatsItem
{
    public string Attribute { get; set; }
    public double Ronaldo { get; set; }
    public double Messi { get; set; }
}

public class FootballPlayerStats
    : List<FootballPlayerStatsItem>
{
    public FootballPlayerStats()
    {
        this.Add(new FootballPlayerStatsItem()
        {
            Attribute = @"Dribbling",
            Ronaldo = 8,
            Messi = 10
        });
        this.Add(new FootballPlayerStatsItem()
        {
            Attribute = @"Passing",
            Ronaldo = 8,
            Messi = 10
        });
        this.Add(new FootballPlayerStatsItem()
        {
            Attribute = @"Finishing",
            Ronaldo = 10,
            Messi = 10
        });
        this.Add(new FootballPlayerStatsItem()
        {
            Attribute = @"Free Kicks",
            Ronaldo = 8,
            Messi = 9
        });
        this.Add(new FootballPlayerStatsItem()
        {
            Attribute = @"Penalties",
            Ronaldo = 9,
            Messi = 7
        });
        this.Add(new FootballPlayerStatsItem()
        {
            Attribute = @"Physical",
            Ronaldo = 10,
            Messi = 7
        });
        this.Add(new FootballPlayerStatsItem()
        {
            Attribute = @"Team Play",
            Ronaldo = 7,
            Messi = 9
        });
        this.Add(new FootballPlayerStatsItem()
        {
            Attribute = @"Heading",
            Ronaldo = 9,
            Messi = 6
        });
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="legend-title">
        Ronaldo vs Messi Player Stats
    </div>
    <div class="legend">
        <IgbLegend
        Name="legend"
        @ref="legend"
        Orientation="LegendOrientation.Horizontal">
        </IgbLegend>

    </div>
    <div class="container vertical fill">
        <IgbDataChart
        Name="chart"
        @ref="chart"
        IsHorizontalZoomEnabled="false"
        IsVerticalZoomEnabled="false">
            <IgbCategoryAngleAxis
            Name="angleAxis"
            @ref="angleAxis"
            DataSource="FootballPlayerStats"
            Label="Attribute">
            </IgbCategoryAngleAxis>

            <IgbNumericRadiusAxis
            Name="radiusAxis"
            @ref="radiusAxis"
            InnerRadiusExtentScale="0.1"
            Interval="2"
            MinimumValue="0"
            MaximumValue="10">
            </IgbNumericRadiusAxis>

            <IgbRadialPieSeries
            Name="RadialPieSeries1"
            @ref="radialPieSeries1"
            DataSource="FootballPlayerStats"
            AngleAxisName="angleAxis"
            ValueAxisName="radiusAxis"
            ValueMemberPath="Ronaldo"
            ShowDefaultTooltip="false"
            AreaFillOpacity="0.8"
            Thickness="3"
            Title="Ronaldo">
            </IgbRadialPieSeries>

            <IgbRadialPieSeries
            Name="RadialPieSeries2"
            @ref="radialPieSeries2"
            DataSource="FootballPlayerStats"
            AngleAxisName="angleAxis"
            ValueAxisName="radiusAxis"
            ValueMemberPath="Messi"
            ShowDefaultTooltip="false"
            AreaFillOpacity="0.8"
            Thickness="3"
            Title="Messi">
            </IgbRadialPieSeries>

            <IgbDataToolTipLayer
            Name="dataToolTipLayer"
            @ref="dataToolTipLayer">
            </IgbDataToolTipLayer>

        </IgbDataChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var legend = this.legend;
        var chart = this.chart;
        var angleAxis = this.angleAxis;
        var radiusAxis = this.radiusAxis;
        var radialPieSeries1 = this.radialPieSeries1;
        var radialPieSeries2 = this.radialPieSeries2;
        var dataToolTipLayer = this.dataToolTipLayer;

        this.BindElements = () => {
            chart.Legend = this.legend;
        };
        this.BindElements();

    }

    private IgbLegend legend;
    private IgbDataChart chart;
    private IgbCategoryAngleAxis angleAxis;
    private IgbNumericRadiusAxis radiusAxis;
    private IgbRadialPieSeries radialPieSeries1;
    private IgbRadialPieSeries radialPieSeries2;
    private IgbDataToolTipLayer dataToolTipLayer;

    private FootballPlayerStats _footballPlayerStats = null;
    public FootballPlayerStats FootballPlayerStats
    {
        get
        {
            if (_footballPlayerStats == null)
            {
                _footballPlayerStats = new FootballPlayerStats();
            }
            return _footballPlayerStats;
        }
    }

}razor

/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css

その他のリソース

API リファレンス

以下のテーブルは、上記のセクションで説明した API メンバーをリストします。

チャートタイプ	コントロール名	API メンバー
円チャート	`IgbPieChart`	`PieChart`
ラジアル円チャート	`IgbDataChart`	`IgbRadialPieSeries`