Blazor ドーナツチャートの概要

Ignite UI for Blazor Doughnut Chart コンポーネントは円チャートと同様、変数の発生を比例的に表示します。ドーナツ型チャートは、複数の変数をコンセントリックリングで表示でき、階層データの可視化を組み込みでサポートします。

Blazor ドーナツチャートの例

モジュールの要件

Blazor ドーナツチャートを作成するには、以下のモジュールが必要です。

DoughnutChartModule.Register(IgniteUIBlazor);
RingSeriesModule.Register(IgniteUIBlazor);

使用方法

ファイナドーナツ型チャートモジュールをインポートした後、チャートをデータにバインドします。コンポーネントを作成するには、最初にバインドするためのデータが必要になります。以下のコードスニペットは、シンプルなデータソースを作成する方法を示します。

次のコードは、ドーナツ型チャートを上記のデータにバインドする方法を示しています。

複数のリング

ドーナツチャートコンポーネントは、複数のリングを、異なるデータ項目にバインド可能な各リングと同時に表示できます。または共通のデータソースを共有できます。たとえば、以下の 2 つのデータソースは、複数のリングにバインドするために使用されます。

```ts
public Months: any[];
public Seasons: any[];
/// ...

this.Months = [
    { Value: 1, Label: "December" },
    { Value: 1, Label: "January" },
    { Value: 1, Label: "February" },
    { Value: 1, Label: "March" },
    { Value: 1, Label: "April" },
    { Value: 1, Label: "May" },
    { Value: 1, Label: "June" },
    { Value: 1, Label: "July" },
    { Value: 1, Label: "August" },
    { Value: 1, Label: "September" },
    { Value: 1, Label: "October" },
    { Value: 1, Label: "November" },
];
this.Seasons = [
    { Value: 4, Label: "Winter" },
    { Value: 4, Label: "Spring" },
    { Value: 4, Label: "Summer" },
    { Value: 4, Label: "Fall" },
];

複数リングサンプル

スライスの選択

ドーナツ型チャートコンポーネントは、1 つ以上のスライスの状態を選択された状態に設定する API を公開します。任意で、単一のカスタムビジュアルスタイルを選択済みスライスに適用できます。

スライス選択の有効化/無効化 - AllowSliceSelection プロパティを設定してドーナツ型チャートでスライスの選択を有効または無効にします。

選択されたスライスのスタイル設定 - スライスの TargetType で選択されたスライスのスタイルを定義し、ドーナツ型チャートの SelectedStyle プロパティに割り当てることでスタイル設定できます。

スライスをクリックして選択状態を変更 - SliceClick イベントにイベントハンドラーをアタッチした場合、選択状態を変更するためのイベント引数のクリックしたスライスへの参照を提供します。ドーナツ型チャートは、選択されたスライスのスタイルを決定する SelectedStyle プロパティを公開します。デフォルトでは、適用されるスタイルはありません。スライスを選択しても表示は変わりません。独自のスタイルを選択されたスライスに適用すると、Slice の TargetType を持つ Style を定義して、SelectedStyle プロパティの値として設定する必要があります。

IsSelected プロパティを設定 - Blazor ドーナツチャートは、IsSelected プロパティを直接変更できるすべてのスライスへの参照を保持しなす。ドーナツチャートは、スライスの選択済み/選択解除の状態の変更に使用する SliceClick イベントを公開します。

SelectedSlices コレクションのコンテンツを変更 - SelectedSlices コレクションのコンテンツを変更して選択されたスライスを変更できます。ドーナツチャートは、Slice オブジェクトへに対し IsSelected プロパティを直接修正できるすべてのスライスへの参照を保持します。

スライス選択のサンプル

凡例

ドーナツチャートコンポネントは凡例の使用をサポートしています。使用される凡例は、一連のチャートを介して接続されている ItemLegend です。

凡例サンプル

アニメーション

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

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

Blazor ドーナツ チャートの概要

Blazor ドーナツ チャートの例