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 が最大値に達すると、アニメーション フラグをリセットし、間隔をクリアしてアニメーションを停止します。

サンプル