Web Components ドーナツ チャートの概要

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

Web Components ドーナツ チャートの例

Edit on CodeSandbox

依存関係

Chart コンポーネントをインストールするときに core パッケージもインストールする必要があります。

npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-charts

モジュールの要件

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

import { IgcDoughnutChartModule } from 'igniteui-webcomponents-charts';
import { IgcRingSeriesModule } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(
    IgcDoughnutChartModule,
    IgcRingSeriesModule
);

使用方法

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

this.data = [
    { Value: 30, Label: "Google",    },
    { Value: 15, Label: "Microsoft", },
    { Value: 30, Label: "Apple",     },
    { Value: 15, Label: "Samsung",   },
    { Value: 10, Label: "Other",     },
];

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

複数のリング

ドーナツ チャート コンポーネントは、複数のリングを、異なるデータ項目にバインド可能な各リングと同時に表示できます。または共通のデータ ソースを共有できます。たとえば、以下の 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" },
];

複数リング サンプル

Edit on CodeSandbox

スライスの選択

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

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

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

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

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

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

スライス選択のサンプル

Edit on CodeSandbox

スライスの分割

ドーナツ チャート コンポーネントのスライスは、コードまたはユーザー インタラクションによって分割できます。

スライス分割の有効化/無効化 allowSliceExplosion プロパティを設定してスライスを分割する機能を有効または無効にできます。

スライスのクリック時にスライスの分割状態を変更 SliceClick イベント用イベント ハンドラーをアタッチする場合、イベント引数でクリックされたスライスへの参照を提供するので、分割状態を修正できます。

IsExploded プロパティの設定 ドーナツ チャートはすべてのスライスへの参照を保持して IsExploded プロパティを直接変更できます。

ExplodedSlices コレクションのコンテンツの修正 ExplodedSlices コレクションのコンテンツを変更することにより公開されたスライスを変更できます。

import { IgcSliceClickEventArgs } from 'igniteui-webcomponents-charts';
import { IgcDoughnutChartComponent } from 'igniteui-webcomponents-charts';

public onSliceClick = (s: IgcDoughnutChartComponent, e: IgcSliceClickEventArgs) => {
    e.isExploded = !e.isExploded;
    e.isSelected = false;
}

スライスの分割のサンプル

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

アニメーション

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

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

window.setInterval(() => this.tick(), 15);
public tick(): void {
    if (this.isAnimating) {
        if (this.chartSeries.radiusFactor < 1.0)
            this.chartSeries.radiusFactor += 0.0025;

        if (this.chartSeries.startAngle < 360)
            this.chartSeries.startAngle++;

        if (this.chartSeries.radiusFactor >= 1.0 &&
            this.chartSeries.startAngle >= 360) {
            this.isAnimating = false;
            window.clearInterval(this.interval);
        }
    }
}

サンプル

Edit on CodeSandbox