バージョン

選択と展開の構成 (igDoughnutChart)

トピックの概要

目的

このトピックでは、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 コントロールの外観がどのようになるか示しています。

プロパティ 値
width “350”
height “350”
series { … selectedStyle: stroke: '#31FF1E' }, }

以下のコードはこの例を実装します。

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>

関連コンテンツ

サンプル

このトピックについては、以下のサンプルも参照してください。

  • Collection にバインド: このサンプルでは、Ignite UI for MVC を使用して igDoughnutChart を描画する方法を紹介します。ヘルパーはサーバーのオブジェクトのコレクションにバインドし、そのコレクションを JSON オブジェクトにシリアル化し、必要な igDoughnutChart HTML および JavaScript を描画します。

オンラインで表示: GitHub