データバインディング

このトピックは、 XamFunnelChart コントロールにデータをバインドする方法を示します。コード例およびスクリーンショットがトピック全体で示されています。

概要

トピックは以下のとおりです。

概要
参照要件
名前空間要件
データ要件
データ描画の規則
ステップの概要
手順
関連トピック

概要

このトピックで示される手順は、XamFunnelChart コントロールをデータコレクションにバインドする方法を示します。データコレクションを定義し、Funnel Chart コントロールをアプリケーションに追加し、そのコントロールの ItemsSource をデータコレクションのインスタンスにバインドします。

参照要件

Infragistics.XF.Charts.dll
Infragistics.XF.DataVisualization.dll
Infragistics.XF.dll

NuGet パッケージで参照を追加トピックについてアセンブリ参照を追加します。

名前空間要件

XAML の場合:

xmlns:ig="clr-namespace:Infragistics.XamarinForms.Controls.Charts;assembly=Infragistics.XF.Charts"
xmlns:local="clr-namespace:FunnelChart_Demo"

以下の手順では、FunnelChart_Demo は、データモデルが定義される名前空間です。以下の using 構文は、FunnelChart_Demo デモまたはデータモデルを含むクラスで必要です。

C# の場合:

using System.Collections.ObjectModel;

データ要件

チャートコントロールによって固有のデータモデルにチャートを簡単にポイントすることができますが、そのチャートが必要とするデータの適切な量とタイプを提供することが重要です。使用しているチャートのタイプに基づいた最小要件をデータが満たさないと、エラーが生成されます。

以下は、ファンネルチャートのデータ要件のリストです。

データモデルには 1 つの数値列を含む必要があります。
データモデルには凡例ラベルのためのオプションの文字列の列を含むことができます。

データ描画の規則

チャートデータは以下の規則を使用して描画されます。

ファンネルチャートは軸を使用しないため軸は描画されません。
各行はファンネルの単一の色が付けられたセクションを構成します。
列内のデータ値の合計を使用して各行に適用可能なパーセンテージを計算するため、データ値はパーセンテージである必要はありません。
データマッピングの Label プロパティにマップされる文字列の列は凡例のラベルとして使用されます。
シリーズコレクションの最初のシリーズのみが描画されます。

ステップの概要

データモデルの定義
Funnel Chart コントロールのインスタンスの追加
(オプション) 結果の検証

手順

データモデルを定義します 。

データをモデル化するためのクラスを作成します。以下のコードは、シンプルな値とラベルのペアを表す TestDataItem クラス、そしてそれらのペアのコレクションを表す TestData クラスを作成します:

C# の場合:

    public class TestData : ObservableCollection<TestDataItem> {
         var slice1 = new TestDataItem();
        slice1.Label = "Impressions";
        slice1.Value = 3000;
        Add(slice1);
        TestDataItem slice2 = new TestDataItem();
        slice2.Label = "Clicks";
        slice2.Value = 2000;
        Add(slice2);
        TestDataItem slice3 = new TestDataItem();
        slice3.Label = "Free Downloads";
        slice3.Value = 1000;
        Add(slice3);
        TestDataItem slice4 = new TestDataItem();
        slice4.Label = "Purchase";
        slice4.Value = 3000;
        Add(slice4);
        TestDataItem slice5 = new TestDataItem();
        slice5.Label = "Repeat Purchase";
        slice5.Value = 500;
        Add(slice5);
        }
    }
    public class TestDataItem
    {
        public string Label { get; set; }
        public double Value { get; set; }
    }

XamFunnelChart コントロールのインスタンスを追加します。

データコレクションのインスタンスを XAML で ContentPage の BindingContext に追加します。

XAML の場合:

<ContentPage.BindingContext>
    <local:TestData />
</ContentPage.BindingContext>
<ig:XamFunnelChart x:Name="funnel"
                    Margin="10"
                    ItemsSource="{Binding}"
                    ValueMemberPath="Value"
                    AllowSliceSelection="True"
                    SelectedSliceOpacity="0.5"
                    UseOuterLabelsForLegend="True"
                    InnerLabelMemberPath="Value"
                    OuterLabelMemberPath="Label"
                    OuterLabelVisibility="Visible">
</ig:XamFunnelChart>

(オプション) 結果を確認します。

結果を検証するために、アプリケーションを実行します。Funnel Chart コントロールのデータコレクションへのバインドが成功すれば、結果のチャートはここに示すようなものになります。

Xamarin | ヘルプ トピック

データ バインディング

概要