React 円チャートの概要
Ignite UI for React 円チャート コンポネントは、セクションに分割された円形の領域で構成される、円チャートを表示するためのコンポーネントです。各セクションには、基本データ値に比例する円弧の長さがあります。
コンポーネントは分類したデータを表すために使用されます。カテゴリが少ない場合や各カテゴリが全体としてデータの相対的に大きなパーセンテージを構成する場合、これは最も効率的です。
React 円チャートの例
依存関係
chart コンポーネントをインストールするときに core パッケージもインストールする必要があります。
npm install --save igniteui-react-core npm install --save igniteui-react-charts
モジュールの要件
IgrPieChart
を作成するには、以下のモジュールが必要です。
import { IgrPieChartModule } from 'igniteui-react-charts';
IgrPieChartModule.register();
使用方法
円チャート モジュールをインポートした後、チャートをデータにバインドします。 円チャート コンポーネントを作成するには、はじめにデータをバインドする必要があります。以下のコード スニペットは、シンプルなデータソースを作成する方法を示します。
var data = [
{ MarketShare: 30, Company: "Google", },
{ MarketShare: 30, Company: "Apple", },
{ MarketShare: 15, Company: "Microsoft", },
{ MarketShare: 15, Company: "Samsung", },
{ MarketShare: 10, Company: "Other", },
];
以下のコードは円チャートを上記のデータにバインドします。
<IgrPieChart
dataSource={this.state.data}
labelMemberPath="Company"
valueMemberPath="MarketShare"
width="300px"
height="300px" />
凡例
円チャートの隣に凡例を表示するには、ItemLegend を作成し、IgrLegend
プロパティに割り当てます。legendLabelMemberPath
は、各円スライスの凡例項目を表示するために使用するデータ モデルのプロパティを指定します。
また、凡例項目の外観をカスタマイズするために legendItemTemplate
と legendItemBadgeTemplate
プロパティ、多数のフォント プロパティを使用できます。
<IgrPieChart dataSource={this.state.data}
labelMemberPath="Company"
valueMemberPath="MarketShare"
width="500px"
height="500px"
legendLabelMemberPath="Company" />
<IgrItemLegend ref={this.legend} />
その他の分類項目
Pie Chart コンポーネントの基本データに、小さい値を含む多くの項目が含まれる場合があります。この場合、Others カテゴリは、単一スライスへの複数のデータ値の自動集計を許可します。
以下のサンプルは、othersCategoryThreshold
を 2 に設定、othersCategoryType
は Number に設定されています。したがって、2 以下の値を含む項目は、Others カテゴリに割り当てられます。
othersCategoryType
を Percent に設定すると、othersCategoryThreshold
は値ではなくパーセンテージとして解釈されます。つまり、値がすべての項目の値の合計の 2% 未満である項目は、Others カテゴリに割り当てられます。使用しているアプリケーションに最も適切な othersCategoryType
を使用できます。
<IgrPieChart dataSource={this.state.data}
labelMemberPath="Company"
valueMemberPath="MarketShare"
width="500px"
height="500px"
othersCategoryThreshold="20"
othersCategoryType="Number"
othersCategoryText="Others"/>
展開
円チャート コントロールは個々の円スライスの選択と展開だけでなく、選択状態を変更しカスタム ロジックを実装することを可能にする SliceClick
イベントをサポートします。
<IgrPieChart dataSource={this.state.data}
labelMemberPath="Company"
valueMemberPath="MarketShare"
width="100%"
height="100%"
explodedRadius={0.2}
explodedSlices="1, 2"
allowSliceExplosion="true"
radiusFactor={0.7}
sliceClick={this.onSliceClick}/>
import { IgrSliceClickEventArgs } from 'igniteui-react-charts';
import { IgrPieChartBase } from 'igniteui-react-charts';
import { IIgrPieChartBaseProps } from 'igniteui-react-charts';
public onSliceClick = (s: IgrPieChartBase<IIgrPieChartBaseProps>, e: IgrSliceClickEventArgs) => {
e.isExploded = !e.isExploded;
e.isSelected = false;
}
選択
デフォルトで、円チャートはマウス クリックによるスライス選択をサポートします。選択されたスライスは、selectedItems
プロパティで取得します。選択したスライスがハイライトされます。
円チャートのモードは selectionMode
プロパティで設定します。デフォルト値は Single
です。選択機能を無効化するためにはプロパティを Manual
に設定します。
円チャートは、選択モードを 3 つサポートします。
- Single - Single モードに設定すると、一度に 1 つのスライスのみ選択します。他のスライスを選択すると、最初に選択したスライスは選択解除され、新しいスライスが選択されます。
- Multiple - Multiple モードに設定すると、一度に複数のスライスを選択します。スライスをクリックするとスライスが選択され、他のスライスをクリックすると、最初のスライスも、新しくクリックしたスライスも選択されます。
- Manual - Manual モードに設定すると、選択は無効化されます。
円チャートには、選択機能に関連する 4 つのイベントがあります。
- SelectedItemChanging
- SelectedItemChanged
- SelectedItemsChanging
- SelectedItemsChanged
「Changing」で終わるイベントはキャンセル可能なイベントです。すなわち、イベント引数プロパティ Cancel
を true に設定することで、スライスの選択を停止します。True に設定すると、関連付けられたプロパティは更新されず、その結果スライスは選択されません。この設定はたとえば、スライスのデータによって一定のスライスの選択を無効化する場合に使用します。
「その他」スライスをクリックすると、IgrPieSliceOthersContext
オブジェクトが返されます。オブジェクトは、「その他」スライスに含まれるデータ項目のリストがあります。
<IgrPieChart dataSource={this.state.data}
labelMemberPath="Company"
valueMemberPath="MarketShare"
width="100%"
height="100%"
ref={this.onPieRef}
selectionMode="multiple"
sliceClick={this.onSliceClick}
selectedSliceStroke="white"
selectedSliceFill="rgb(143,143,143)"
selectedSliceOpacity = "1.0"
selectedSliceStrokeThickness= "2"/>
public onPieRef(chart: IgrPieChart) {
this.chart = chart;
}
public onSliceClick = (s: IgrPieChartBase<IIgrPieChartBaseProps>, e: IgrSliceClickEventArgs) =>
let selectedSlices: string = "";
const selectedItems = this.chart.selectedItems.toArray();
for (const item of selectedItems) {
selectedSlices += item.Company + " ";
}
this.setState( {selectedLabel: selectedSlices } );
}
アニメーション
チャートの半径をスケールする 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);
}
}
}