バージョン

XamFunnelChart を使用した作業の開始

このトピックは、 XamFunnelChart コントロールのさまざまな主な特長および機能の構成方法と使用法を説明することを目的としています。

XamFunnelChart の使用

このセクションでは機能の理解を助け使用例をご覧いただけるよう重要な概念的およびタスク ベースの情報を含んでいます。

前提条件

まず以下のトピックを読む必要があります。

コントロールの構成の概要

コントロールの構成表

以下の表は、XamFunnelChart コントロールの構成可能な要素とビヘイビアを示しています。

構成可能な要素とビヘイビア 構成の詳細 構成プロパティ

スライスの選択

スライスの選択を有効にし、スライスの表示形式を指定する方法を説明します。

スライスの反転

データの選択を縦方向に表すようスライスを反転する方法を説明します。

ラベルを表示します

ラベルを表示するには、InnerLabelMemberPath と OuterLabelMemberPath をターゲット プロパティに設定します。

凡例を表示します

凡例を表示するには ItemLegend のインスタンスを作成し、それをファンネル チャート コントロールの凡例プロパティに設定する必要があります。

ベジエ曲線の使用

ベジエ曲線を使用するとファンネル チャートがスムーズなカーブになります。

スライスの選択

スライス選択プロパティ設定

以下の表は、推奨構成 / ビヘイビアを対応するプロパティ設定にマップしています。

目的 使用するプロパティ: それを次に設定…​

スライス選択の有効化

True

スライスの表示形式を示します

Uniform

Weighted

スライスを選択するコードの例

スライス選択を有効にするためには AllowSliceSelection プロパティは true に設定してください。

C# の場合:

funnel.AllowSliceSelection = true;

XAML の場合:

<ig:XamFunnelChart AllowSliceSelection="True"/>

XamFunnelChart コントロールは 2 つの表示形式タイプを公開します。

  1. スライスがすべて同じ高さの部分を統合します (デフォルト) 。

  2. スライスの高さが基本となるデータの計算されたパーセンテージ値に基づいている部分を重み付けします。

C# の場合:

funnel.FunnelSliceDisplay = FunnelSliceDisplay.Uniform;

XAML の場合:

<ig:XamFunnelChart FunnelSliceDisplay="Uniform" />
xamFunnelChart UsingFunnelChart Xamarin 01.png

図 1: FunnelChart 表示形式

スライスの反転

スライスのプロパティ設定の反転

以下の表は、推奨構成 / ビヘイビアを対応するプロパティ設定にマップしています。

目的 使用するプロパティ: それを次に設定…​

スライスの反転

True

スライスのコード例の反転

コントロール上のスライスを反転するために、 IsInverted プロパティは true (デフォルトは false) に設定し、スライスがボタンのクリックでトリガーされるようにします。

C# の場合:

funnel.IsInverted = true;

XAML の場合:

<ig:XamFunnelChart IsInverted="True"/>

ラベルを表示します

ラベル プロパティ設定の表示

以下の表は、推奨構成 / ビヘイビアを対応するプロパティ設定にマップしています。

目的 使用するプロパティ: それを次に設定…​

ラベルを表示します

[データ モデルの任意フィールド]

[データ モデルの任意フィールド]

ラベル コード例の表示

ラベルの表示はまず表示状態の設定が先で、次にパスを適切なターゲットに指定します。

C# の場合:

funnel.InnerLabelVisibility = System.Windows.Visibility.Visible;
funnel.OuterLabelVisibility = System.Windows.Visibility.Visible;
funnel.InnerLabelMemberPath = "Value";
funnel.OuterLabelMemberPath = "Label";
funnel.InnerLabelVisibility = Infragistics.Core.Visibility.Visible;
funnel.OuterLabelVisibility = Infragistics.Core.Visibility.Visible;
funnel.InnerLabelMemberPath = "Value";
funnel.OuterLabelMemberPath = "Label";

XAML の場合:

<ig:XamFunnelChart
     InnerLabelVisibility="Visible"
     OuterLabelVisibility="Visible"
     InnerLabelMemberPath="Value"
     OuterLabelMemberPath="Label"/>

凡例を表示します

凡例プロパティ設定の表示

以下の表は、推奨構成 / ビヘイビアを対応するプロパティ設定にマップしています。

目的 使用するプロパティ: それを次に設定…​

凡例を表示します

Legend = [ItemLegend インスタンスの要素名]

True

凡例の表示 - コード例

凡例の表示には ItemLegend のインスタンスを作成してからファンネル チャート コントロールの凡例プロパティを ItemLegend インスタンスの要素名に設定することが必要です。

XAML の場合:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <ig:ItemLegend x:Name="Legend" Grid.Row="1"
                    VerticalOptions="CenterAndExpand"
                    HorizontalOptions="StartAndExpand" />
    <ig:XamFunnelChart x:Name="funnel" Grid.Row="0"
                       ItemsSource="{Binding}"
                       ValueMemberPath="Value"
                       UseOuterLabelsForLegend="True"
                       InnerLabelMemberPath="Value"
                       OuterLabelMemberPath="Label"
                       OuterLabelVisibility="Collapsed"
                       Legend="{x:Reference Legend}">
        </ig:XamFunnelChart>
    </Grid>
xamFunnelChart UsingFunnelChart Xamarin 02.png

図 2: FunnelChart 凡例

ベジエ曲線の使用

ベジエ曲線プロパティ設定の使用

以下の表は、推奨構成 / ビヘイビアを対応するプロパティ設定にマップしています。

目的 使用するプロパティ: それを次に設定…​

ベジエ曲線の使用

True

ベジエ曲線例の使用

ベジエ曲線を使うという考えは、ファンネル チャート コントロールの外観をスムーズな線にするためです。XamFunnelChart はベジエ曲線の設定のための Point タイプの 2 つのプロパティを公開します。コントロールがベジエ曲線を使うために設定される場合、ファンネルの両側の線は曲線を形成するコントロール ポイントに向かって動くようコントロール ポイントを使います。詳細については、 ベジエ曲線を参照してください。

UpperBezierControlPoint および LowerBezierControlPoint プロパティは、ベジエ曲線のコントロール ポイントとして X/Y 座標を取得します。以下のコード例では、プロパティ設定とその結果をスクリーンショットと共に示します。

XAML の場合:

<ig:XamFunnelChart
     UseBezierCurve="True"
     UpperBezierControlPoint="0.25, 0.25"
     LowerBezierControlPoint="0.7, 0.4" />
xamFunnelChart UsingFunnelChart Xamarin 03.png

図 3: ベジエ曲線を使った FunnelChart

関連トピック

データ バインディング はファンネル チャートをバインドする方法を示します。

APIの概要 には、コントロールを使ったプログラミングの差異に知っておくべき名前空間といくつかの主要なクラスのリストが含まれます。