ドーナツ チャート

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

サンプル

依存関係

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

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

モジュールの要件

React Douhgnut Chart コンポーネントは以下のモジュールを要求します。

import { IgrDoughnutChartModule } from 'igniteui-react-charts';
import { IgrDoughnutChart } from 'igniteui-react-charts';
import { IgrRingSeriesModule } from 'igniteui-react-charts';
import { IgrRingSeries } from 'igniteui-react-charts';

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

使用方法

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

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

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

<IgrDoughnutChart height="100%" width="100%">
    <IgrRingSeries
        name="ring1"
        dataSource={this.data}
        labelMemberPath="Label"
        valueMemberPath="Value"/>
</IgrDoughnutChart>

複数のリング

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

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" },
];
<IgrDoughnutChart height="100%" width="100%">
    <IgrRingSeries
       name="Months"
       dataSource={this.Months}
       labelsPosition="Center"
       labelMemberPath="Label"
       valueMemberPath="Value"
       radiusFactor={0.9}
       startAngle={0}/>
    <IgrRingSeries
       name="Seasons"
       dataSource={this.Seasons}
       labelsPosition="InsideEnd"
       labelMemberPath="Label"
       valueMemberPath="Value"
       radiusFactor={0.4}
       startAngle={0}/>
</IgrDoughnutChart>

複数リング サンプル

スライスの選択

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

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

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

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

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

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

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

スライス選択のデモ

スライスの分割

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

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

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

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

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

<IgrDoughnutChart height="100%" width="100%"
    ref={this.onChartRef}
    allowSliceExplosion="true"
    sliceClick={this.onSliceClick}>
    <IgrRingSeries
        name="ring1"
        dataSource={this.state.data}
        labelMemberPath="Company"
        valueMemberPath="MarketShare"
        radiusFactor={0.7}/>
</IgrDoughnutChart>
import { IgrSliceClickEventArgs } from 'igniteui-react-charts';
import { IgrDoughnutChart } from 'igniteui-react-charts';

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

スライスの分割のデモ

凡例

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

import { IgrItemLegendModule } from 'igniteui-react-charts';
import { IgrItemLegend } from 'igniteui-react-charts';

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;
    }
}

凡例デモ