ドーナツ チャート

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

デモ

依存

チャート パッケージをインストールするときは、コア パッケージもインストールする必要があります。

  • npm install --save igniteui-react-core
  • npm install --save igniteui-react-charts

必要なモジュール

IgrDoughnutChart は、以下のモジュールが必要です。

import { IgrDoughnutChartModule } from "igniteui-react-charts/ES5/igr-doughnut-chart-module";
import { IgrDoughnutChart } from "igniteui-react-charts/ES5/igr-doughnut-chart";
import { IgrRingSeriesModule } from "igniteui-react-charts/ES5/igr-ring-series-module";
import { IgrRingSeries } from "igniteui-react-charts/ES5/igr-ring-series";

IgrDoughnutChartModule.register();
IgrRingSeriesModule.register();

使用方法

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

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

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

<IgrDoughnutChart
    height="100%">
    <IgrRingSeries
        name="ring1"
        dataSource={this.state.data}
        labelMemberPath="Company"
        valueMemberPath="MarketShare"/>
</IgrDoughnutChart>

構成可能な要素

複数のリング

xamDoughnutChart は、複数のリングを、異なるコレクションにバインド可能な各リングと同時に表示できます。または共通のデータ ソースを共有できます。

スライスの選択

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

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

<IgrDoughnutChart
    height="100%"
    allowSliceSelection="true"
    ref={this.onPieRef}
    sliceClick={this.onSliceClick}>
    <IgrRingSeries
        name="ring1"
        dataSource={this.state.data}
        labelMemberPath="Company"
        valueMemberPath="MarketShare"/>
</IgrDoughnutChart>

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

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

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

スライスの分割

スライスをクリックして展開状態を変更 SliceClick イベントにイベント ハンドラーをアタッチした場合、クリックされたスライスへの参照がイベント引数に提供されて展開状態を変更できます。

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

import { SliceClickEventArgs } from "igniteui-react-charts/ES5/igr-slice-click-event-args";
<IgrDoughnutChart
    ref={this.onChartRef}
    height="100%"
    allowSliceExplosion="true"
    sliceClick={this.onSliceClick}>
    <IgrRingSeries
        name="ring1"
        dataSource={this.state.data}
        labelMemberPath="Company"
        valueMemberPath="MarketShare"
        radiusFactor={0.7}/>
</IgrDoughnutChart>
public onSliceClick = (s: IgrDoughnutChart, e: SliceClickEventArgs) => {
    e.isExploded = !e.isExploded;
    e.isSelected = false;
}

凡例

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

import { IgrItemLegendModule } from "igniteui-react-charts/ES5/igr-item-legend-module";
import { IgrItemLegend } from "igniteui-react-charts/ES5/igr-item-legend";

IgrItemLegendModule.register();
<div className="legend">
    <IgrItemLegend ref={this.onLegendRef} />
</div>
<div className="chart">
    <IgrDoughnutChart ref={this.onChartRef}
        width="300px"
        height="300px">
        <IgrRingSeries
            name="ring1"
            dataSource={this.state.data}
            labelMemberPath="Company"
            valueMemberPath="MarketShare"/>
    </IgrDoughnutChart>
</div>
public chart: IgrDoughnutChart;
public legend: IgrItemLegend;
...
this.onChartRef = this.onChartRef.bind(this);
this.onLegendRef = this.onLegendRef.bind(this);
...
public onChartRef(chart: IgrDoughnutChart) {
    this.chart = chart;
    if (this.legend) {
        this.chart.actualSeries[0].legend = this.legend;
    }
}

public onLegendRef(legend: IgrItemLegend) {
    this.legend = legend;
    if (this.chart) {
        this.chart.actualSeries[0].legend = this.legend;
    }
}

凡例のデモ