以下のコードは、XamDoughnutChart を Xamarin.Forms アプリケーションに追加する方法を示します。
以下のスクリーンショットは結果のプレビューです。
Xamarin.Forms プロジェクトで以下のアセンブリへの参照を追加します:
Infragistics.XF.Charts.dll
Infragistics.XF.DataVisualization.dll
「NuGet パッケージで参照を追加」トピックの手順に従ってアセンブリ参照を追加します。
Infragistics xml 名前空間が宣言されている空白の ContentPage:
XAML の場合:
xmlns:ig="clr-namespace:Infragistics.XamarinForms.Controls.Charts;assembly=Infragistics.XF.Charts"以下はプロセスの概要です。
1. サンプル データの追加
2. XamDoughnutChart コントロールの追加
3.シリーズの追加
以下の手順は、XamDoughnutChart コントロールをアプリケーションに追加する方法について説明します。
1.サンプル データ モデル クラスを定義します。
ページのコードビハインドでは、以下のクラス定義を追加します。
C# の場合:
public class Category
{
public string Label { get; set; }
public double AveragePrice { get; set; }
}このクラスのインスタンスのリストを作成して、描画された RingSeries 用の ItemsSource として提供します。
2.サンプル データ リストを作成して、ContentPage の BindingContext として設定します。
ページのコンストラクターで以下のコードを追加します。
C# の場合:
this.DataContext = new List<Category>()
{
new Category () {Label="Footwear", AveragePrice=52.34},
new Category () {Label="Clothing", AveragePrice=32.2},
new Category () {Label="Accessories", AveragePrice=15.12},
new Category () {Label="Equipment", AveragePrice=39.65}
};XamDoughnutChart 宣言をページに追加します。
XAML の場合:
<ig:XamDoughnutChart x:Name="doughnutChart">
</ig:XamDoughnutChart>1.シリーズを追加します。
データを XamDoughnutChart に表示するには、1 つ以上のシリーズをその Series コレクションに追加する必要があります。このプロシージャは 1 つの RingSeries を使用します。
2.必要なプロパティをシリーズに設定します。
シリーズを正しく構成するには、 ItemsSource 、 ValueMemberPath およびオプションで LabelMemberPath および LabelsPosition のプロパティを以下の手順に従って設定する必要があります。
ItemsSource を設定します。
ItemsSource は、シリーズのデータの出所となる IEnumerable プロパティです。 この例では、このプロパティを直接 BindingContext にバインドします。
ValueMemberPath を設定します。
ValueMemberPath をそれぞれのスライスのサイズを計算するために使用されるプロパティ名に設定します。このサンプルの場合、プロパティを「AveragePrice」 に設定します。
LabelMemberPath を設定します。
チャートの各スライス用ラベルを取得するために使用されるデータ オブジェクトにおいて、LabelMemberPath をプロパティ名に設定しなければなりません。このサンプルの場合、プロパティを「Label」 に設定します。
LabelsPosition (オプション) を設定します。
LabelsPosition は、このスライスに相対的な位置のラベルを指定します。このサンプルの場合、BestFit に設定します。
XAML の場合:
<ig:XamDoughnutChart x:Name="doughnutChart">
<ig:XamDoughnutChart.Series>
<ig:RingSeries ItemsSource="{Binding}" LabelMemberPath="Label" ValueMemberPath="AveragePrice" LabelsPosition="BestFit"/>
</ig:XamDoughnutChart.Series>
</ig:XamDoughnutChart>以下のトピックでは、このトピックに関連する追加情報を提供しています。