このトピックでは、igDoughnutChart
™ のスライスの選択および展開を構成する方法を説明します。
このトピックを理解するためには、以下の概念を理解しておく必要があります。
igDoughnutChart の概要: このトピックは、igDoughnutChart
コントロールの概要を説明します。
igDoughnutChart の追加: このトピック グループでは、igDoughnutChart
コントロールを HTML ページと ASP.NET MVC アプリケーションに追加する方法を示します。
このトピックは、以下のセクションで構成されます。
以下の表に、igDoughnutChart
コントロールの、スライスの選択に関して構成可能な項目の一覧を示します。
構成可能な項目 | 詳細 | プロパティ/イベント |
---|---|---|
スライス選択の有効化/無効化 | スライスを選択する機能を有効または無効にできます。 | allowSliceSelection |
選択済みスライスの見た目の構成 |
style を定義し、igDoughnutChart コントロールの selectedStyle プロパティに割り当てることで、選択されたスライスがどのように見えるかを定義できます。
|
selectedStyle |
スライスのクリック時の選択状態の変更 |
sliceClick イベント用イベント ハンドラーをアタッチすると、イベント引数でクリックされたスライスへの参照が提供され、スライスの選択状態を修正できます。
|
igDoughnutChart
でスライス選択を有効 (デフォルト設定) または無効にできます。
注: このトピックで残っているスライス選択構成のすべてをスライス選択を有効にして実行します。
以下の表は、要求ビヘイビアーをプロパティ設定にマップしています。
目的: | 使用するプロパティ: | 設定の選択肢: |
---|---|---|
スライス選択の有効化/無効化 | allowSliceSelection |
true または false |
igDoughnutChart
は、選択されたスライスの見た目を決定する selectedStyle
プロパティを公開します。デフォルトでは、適用されるスタイルはありません。スライスを選択しても、その見た目はどのようにも変わりません。独自のスタイルを選択されたスライスに適用するには、styleを定義し、それを selectedStyle
プロパティの値として構成する必要があります。すべてのシリーズのスライスに適用されるスタイルの設定だけでなく、異なるシリーズにさまざまなスタイルを指定することもできます。その場合は、各シリーズの selectedStyle
プロパティに個別のスタイルを割り当てます。
以下の表は、要求ビヘイビアーをプロパティ設定にマップしています。
目的: | 使用するプロパティ: | 設定の選択肢: |
---|---|---|
選択済みスライスの見た目の構成 | selectedStyle |
スタイル |
以下のスクリーンショットは、以下の設定の結果、igDoughnutChart
コントロールの外観がどのようになるか示しています。
以下のコードはこの例を実装します。
HTML の場合:
<html>
<head>
…
$(function () {
var dc = $("#doughnutChart").igDoughnutChart({
…
series: [
{
name: "flatSeries",
valueMemberPath: "Index",
dataSource: data,
labelMemberPath: 'ProductCategory',
selectedStyle: { stroke: '#31FF1E' },
}
]
});
});
</script>
</head>
<body>
<!-- Target element for the igDoughnutChart -->
<div id="doughnutChart"></div>
</body>
</html>
igDoughnutChart
は、スライスの選択 / 非選択状態を変更するために使用する sliceClick
イベントを公開します。
以下の表は、要求ビヘイビアーをプロパティ設定にマップしています。
目的: | このイベント/プロパティを使用します: | 手順 |
---|---|---|
isSelected プロパティを設定します。 |
sliceClick isSelected |
isSelected プロパティを true または false に設定します。 |
以下のコード例は、クリック時に選択状態の切り替え方法を示します。
HTML の場合:
<html>
<head>
…
$(function () {
var dc = $("#doughnutChart").igDoughnutChart({
width: 350,
height: 350,
sliceClick: function (event, ui) {
ui.slice.isSelected = !ui.slice.isSelected;
},
series: [
{
…
}
]
});
});
</script>
</head>
<body>
<!-- Target element for the igDoughnutChart -->
<div id="doughnutChart"></div>
</body>
</html>
以下の表に、igDoughnutChart
コントロールの、スライスの展開に関して構成可能な項目の一覧を示します。
構成可能な項目 | 詳細 | プロパティ/イベント |
---|---|---|
スライス公開の有効化/無効化 | スライスを公開する機能を有効または無効にできます。 | allowSliceExplosion |
スライスのクリック時にスライスの展開状態を変更 | sliceClick イベント用イベント ハンドラーをアタッチすると、イベント引数でクリックされたスライスへの参照を提供され、展開状態を修正できます。 |
|
igDoughnutChart
でスライス展開を有効 (デフォルト設定) または無効にできます。
注: このトピックで残っているスライス展開構成のすべてをスライス展開を有効にして実行します。
以下の表は、要求ビヘイビアーをプロパティ設定にマップしています。
目的: | 使用するプロパティ: | 設定の選択肢: |
---|---|---|
スライス公開の有効化/無効化 | allowSliceExplosion | true または false |
以下のスクリーンショットは、1 つのスライスが展開された igDoughnutChart
を示します。
igDoughnutChart
は、スライスを展開するかどうかを変更するために使用する sliceClick
イベントを公開します。
以下の表は、要求ビヘイビアーをプロパティ設定にマップしています。
目的: | このイベント/プロパティを使用します: | 手順 |
---|---|---|
isExploded プロパティを設定します。 |
sliceClick isExploded |
isExploded プロパティを true または false に設定します。 |
以下のコード例は、クリック時に公開状態の切り替え方法を示します。
HTML の場合:
<html>
<head>
…
$(function () {
var dc = $("#doughnutChart").igDoughnutChart({
width: 350,
height: 350,
sliceClick: function (event, ui) {
ui.slice.isExploded = !ui.slice.isExploded;
},
series: [
{
…
}
]
});
});
</script>
</head>
<body>
<!-- Target element for the igDoughnutChart -->
<div id="doughnutChart"></div>
</body>
</html>
このトピックについては、以下のサンプルも参照してください。
igDoughnutChart
を描画する方法を紹介します。ヘルパーはサーバーのオブジェクトのコレクションにバインドし、そのコレクションを JSON オブジェクトにシリアル化し、必要な igDoughnutChart
HTML および JavaScript を描画します。オンラインで表示: GitHub