Web Components 円チャートの概要

Ignite UI for Web Components 円チャート コンポネントは、セクションに分割された円形の領域で構成される、円チャートを表示するためのコンポーネントです。各セクションには、基本データ値に比例する円弧の長さがあります。

コンポーネントは分類したデータを表すために使用されます。カテゴリが少ない場合や各カテゴリが全体としてデータの相対的に大きなパーセンテージを構成する場合、これは最も効率的です。

Web Components 円チャートの例

Edit on CodeSandbox

依存関係

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

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

モジュールの要件

IgcPieChartComponent を作成するには、以下のモジュールが必要です。

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

ModuleManager.register(IgcPieChartModule);

使用方法

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

var data = [
    { MarketShare: 30, Company: "Google",    },
    { MarketShare: 30, Company: "Apple",     },
    { MarketShare: 15, Company: "Microsoft", },
    { MarketShare: 15, Company: "Samsung",   },
    { MarketShare: 10, Company: "Other",     },
];

以下のコードは円チャートを上記のデータにバインドします。

凡例

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

また、凡例項目の外観をカスタマイズするために legendItemTemplate と legendItemBadgeTemplate プロパティ、多数のフォント プロパティを使用できます。

<igc-pie-chart id="chart"
        width="100%" height="100%"
        outlines="White"
        value-member-path="MarketShare"
        label-member-path="MarketShare"
        legend-label-member-path="Company"
        radius-factor="0.7">
</igc-pie-chart>

<igc-item-legend id="legend"></igc-item-legend>
Edit on CodeSandbox

その他の分類項目

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

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

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

 <igc-pie-chart id="chart"
        width="100%" height="100%"
        label-member-path="Company"
        value-member-path="MarketShare"
        others-category-threshold="20"
        others-category-type="Number"
        others-category-text="Others"
        radius-factor="0.7">
</igc-pie-chart>
Edit on CodeSandbox

展開

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

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

public onSliceClick = (s: IgcPieChartComponent, e: IgcSliceClickEventArgs) => {
    e.isExploded = !e.isExploded;
    e.isSelected = false;
}
Edit on CodeSandbox

選択

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

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

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

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

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

  • SelectedItemChanging
  • SelectedItemChanged
  • SelectedItemsChanging
  • SelectedItemsChanged

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

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

<igc-pie-chart id="chart"
    width="100%"
    height="100%"
    label-member-path="Company"
    value-member-path="MarketShare"
    selection-mode="Multiple"
    radius-factor="0.7">
</igc-pie-chart>

Public onSliceClick(s: IgcPieChartComponent, e: IgcSliceClickEventArgs) {
    let selectedSlice: string = "";
    const selectedItems = this.chart.selectedItems.toArray();

    for (const item of selectedItems) {
        selectedSlice += item.Company + ", ";
    }

    this.label.innerText = "Selected Slices: " + selectedSlice;
    }
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.chart.radiusFactor < 1.0)
            this.chart.radiusFactor += 0.0025;

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

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