このトピックでは、igFunnelChart™ コントロールの可視機能とビヘイビアーの構成方法を説明します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
igFunnelChart の概要: このトピックでは、主要機能、最小要件、ユーザー機能性など、igFunnelChart コントロールに関する概念的な情報を提供します。
igFunnelChart の追加: このトピックでは、igFunnelChart コントロールを HTML ページに追加しデータへバインドする方法を説明します。
このトピックは、以下のセクションで構成されます。
igFunnelChart コントロールの目的は、同じ側面を示すカテゴリーのセットに対し値を表示することにあります (製品のカテゴリに対する総在庫またはある国の年齢グループの人口など)。
igFunnelChart コントロールの構成可能な点:
これらの点は、それぞれ以下の構成の概要表で説明します。
以下の表は、igFunnelChart コントロールの構成可能な要素を示しています。
| 構成可能な項目 | 詳細 | JavaScript プロパティ | ASP.NET MVC プロパティ |
|---|---|---|---|
| ファンネルの方向 | デフォルトでは、値に基づいて降順でリストされた項目でチャートはレンダリングされます (最大値が一番上、最小値が一番下)。igFunnelChart は、反対順でスライスを表示するために構成できます。 | ||
| スライスのウェイト | デフォルトでは、ファンネル チャートはその値に基づいて高さの異なるスライスを描画します。高さを一様に構成できます。 | ||
| ファンネルのシェイプ | igFunnelChart は、直線またはベジエ曲線に基づいてシェイプを描画します。有効にした場合、ベジエ曲線のシェイプではベジエ コントロール ポイントの座標を設定する必要があります。 デフォルトでは、チャートは直線で描画されます。 | ||
| スライスの選択 | スライスの選択は、個々のスライスを選択する機能です。スライスが選択されると、対応するイベントが発生します。デフォルトでは、スライスの選択が無効になっています。 | ||
| ラベルの表示 | igFunnelChart は、スライスの内側 (インナー) と外側 (アウター) のラベルを描画し、両方のラベルに対して個々の表示コントロールを提供します。デフォルトでは、インナー ラベルのパスが定義されるとラベルが表示されます。これは、アウター ラベルが定義済みであっても有効となりません。 | ||
| 外側ラベルの配置 | ファンネル チャートの左側または右側にアウター ラベルを配置できます。デフォルトでは、ラベルはファンネル チャートの左側に配置されます。 | ||
| ツールチップのルック アンド フィール | ページ上でツールチップを描画するためのテンプレートを定義できます。デフォルトではツールチップ テンプレートの定義はないため、表示されるツールチップはありません。 | ||
| アニメーション速度 | ファンネル チャートの視覚要素が変更されるときに igFunnelChart がアニメーションを描画する速度を構成できます。デフォルトでは、アニメーションの時間は 0 ミリ秒であり、これはアニメーションが無効であるという意味です。 |
デフォルト設定では、igFunnelChart コントロールはファンネル チャートを以下の設定で描画します。
設定されない項目:
以下の画像は、これらの igFunnelChart コントロールのデフォルト設定で描画されるファンネル チャートを示します。
チャートを適切に描画するには、以下を持つ igFunnelChart コントロールを構成する必要があります。
技術的な要件ではありませんが、ユーザーにとってチャートが意味をなすものとなるためには、以下も定義する必要があります。
以下の表は、このトピックで使用したコード例をまとめたものです。
| 例 | 説明 |
|---|---|
| 反転ファンネル チャートを構成する | このサンプルは、 igFunnelChart コントロールを構成して反転されたファンネルを描画する方法を示します。 |
| 加重ライスを構成する | このサンプルは、 igFunnelChart コントロールを構成して加重スライスを描画する方法を示します。 |
| ベジエ曲線のファンネル チャートを構成する | このサンプルは、 igFunnelChart コントロールを構成しベジエ曲線シェイプを使用する方法を示します。 |
| スライス選択を有効にする | このサンプルは、igFunnelChart のスライス選択機能を有効にする方法およびスライスのクリックされたイベントに応答する方法を示します。 |
このコード例は、 igFunnelChart コントロールを構成して反転されたファンネルを表示する方法を示しています。通常のファンネル チャートは、ファンネルの一番上に最大スライスを表示し一番下に最小スライスを表示しますが、反転されたファンネル チャートは、一番上に最小のスライスを一番下に最大スライスを表示します。
以下のコードはこの例を実装します。
JavaScript の場合:
$("#chartInverted").igFunnelChart({
width: "325px",
height: "450px",
dataSource: data,
valueMemberPath: "Budget",
innerLabelMemberPath: "Budget",
innerLabelVisibility: "visible",
outerLabelMemberPath: "Department",
outerLabelVisibility: "visible",
isInverted: true
});
このコード例は、 igFunnelChart コントロールを構成して加重スライスを描画する方法を示します。通常、ファンネル チャートは高さの同じスライスで描画しますが、加重スライスは値に応じて異なる高さで描画します。
以下のコードはこの例を実装します。
JavaScript の場合:
$("#chartWeighted").igFunnelChart({
width: "325px",
height: "450px",
dataSource: data,
valueMemberPath: "Budget",
innerLabelMemberPath: "Budget",
innerLabelVisibility: "visible",
outerLabelMemberPath: "Department",
outerLabelVisibility: "visible",
funnelSliceDisplay: "weighted"
});
このコード例は、 igFunnelChart コントロールを構成しベジエ曲線シェイプを使用する方法を示します。
ベジエ曲線機能を有効にするには、useBezierCurve オプションを使用します。bezierPoints オプションは、ベジエ コントロール ポイントの上部と下部の座標を構成し、ファンネル チャートのシェイプを決めます。オプションに渡される文字列には、0 から 1 の間の数字が 4 つ含まれスペースで区切られます。1 つめと 2 つめの数字で上部のコントロール ポイントの x と y の座標を定義し、3 つめと 4 つめの数字で下部のコントロール ポイントの x と y の座標を定義します。
以下のコードはこの例を実装します。
JavaScript の場合:
$("#chartBezier").igFunnelChart({
width: "325px",
height: "450px",
dataSource: data,
valueMemberPath: "Budget",
innerLabelMemberPath: "Budget",
innerLabelVisibility: "visible",
outerLabelMemberPath: "Department",
outerLabelVisibility: "visible",
useBezierCurve: true,
bezierPoints: "0.1 0.1 0.7 1"
});
このコード例は、igFunnelChart のスライス選択機能を有効にする方法およびスライスのクリックされたイベントに応答する方法を示します。スライス選択を有効にすると、スライス上でクリックするたびに sliceClicked イベントが発生します。
allowSliceSelection オプションを true に設定してスライス選択を有効にします。特殊なスタイルで描画することにより選択されていないスライスの外観を変更するようコントロールを構成するために useUnselectedStyle オプションを true に設定します。(詳細は、「スタイル設定トピック」を参照)
イベント ハンドラで sliceClicked オプションを構成すると、内部配列からクリックされたスライスへ関連づけられた項目を追加または削除します。イベント ハンドラは、コントロールから渡された ui.selected フラグを使用して、スライスが選択されているか未選択であるかを決定します。
注: API 選択が変更されると、sliceClicked イベントは発生しません。
igFunnelChartのselectedSliceItems()メソッドを使用して選択されたスライスのインデックスを取得できます。
以下のコードはこの例を実装します。
JavaScript の場合:
var selectedSlices = [];
$("#chart").igFunnelChart({
width: "350px",
height: "500px",
dataSource: data,
valueMemberPath: "Budget",
innerLabelMemberPath: "Budget",
innerLabelVisibility: "visible",
outerLabelMemberPath: "Department",
outerLabelVisibility: "visible",
allowSliceSelection: true,
useUnselectedStyle: true,
sliceClicked: function (evt, ui) {
if (ui.selected) {
selectedSlices.push(ui.item);
}
else {
selectedSlices.removeItem(ui.item);
}
}
});
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
igFunnelChart のデータへのバインディング: このトピックでは、igFunnelChart コントロールを各種データ ソースへバインドする方法を説明します。
igFunnelChart のスタイル設定: このトピックでは、igFunnelChart コントロールのルックアンドフィールをカスタマイズする方法を説明します。
アクセシビリティ準拠 (igFunnelChart): このトピックでは、igFunnelChart コントロールのユーザー補助機能について説明し、チャートを含むページのアクセシビリティの遵守を実現する方法に関してアドバイスを提供します。
既知の問題と制限 (igFunnelChart): このトピックでは、igFunnelChart コントロールに関連する既知の問題点に関する情報を提供します。
jQuery と MVC API リンク (igFunnelChart): このトピックでは、igFunnelChart コントロールと ASP.NET MVC ヘルパーのための API リファレンスのドキュメントへのリンクの一覧を示します。
以下のサンプルでは、このトピックに関連する情報を提供しています。
sliceClicked イベントの処理を示します。オンラインで表示: GitHub