xmlns:ig="http://schemas.infragistics.com/xaml"
このトピックでは、XamDataPieChart コントロールにデータをバインドする方法を説明します。トピックの最後で、完全なコード例を提供します。
トピックは以下のとおりです。
以下の手順は、XamDataPieChart コントロールをデータ コレクションにバインドする方法を示します。
以下の NuGet パッケージをメイン プロジェクトに追加します。
Infragistics.WPF.Charts
NuGet フィードのセットアップと NuGet パッケージの追加の詳細については、NuGet フィード ドキュメントを参照してください。
また、次の Infragistics 名前空間を追加します。
XAML の場合:
xmlns:ig="http://schemas.infragistics.com/xaml"C# の場合:
using Infragistics.Controls.Charts;VB の場合:
Imports Infragistics.Controls.ChartsXamDataPieChart には、少なくとも 2 つのプロパティを定義するデータ項目のコレクションが必要です。1 つはラベルとして使用するプロパティ、もう 1 つは各スライスの値として使用する数値プロパティです。データ項目がこれらの最小プロパティのみを定義していると仮定すると、コントロールの DataSource プロパティを設定するだけで、自動的にこれらのプロパティを認識します。
基礎となるデータ項目に 2 つ以上のプロパティがある場合、使用するプロパティを定義する別の方法があります。最初の方法は、LabelMemberPath および ValueMemberPath プロパティを使用し、それぞれラベルと値に使用するプロパティ名を指定することです。
また、チャートの IncludedProperties または ExcludedProperties コレクションを利用することもできます。これらのコレクションは、XamDataPieChart のプロットに含めるまたは除外するプロパティ名の文字列配列を受け取ります。
以下のコードは、シンプルな値-ラベルペアを表す DataItem クラスと、ExcludedProperties コレクションを示すために使用する 3 番目の文字列プロパティを作成します。また、これらの DataItem のコレクションを表す Data クラスもあります:
C# の場合:
public class Data : ObservableCollection<DataItem>
{
public Data()
{
this.Add(new FinancialDataPoint { Spending = 20, Budget = 60, Label = "Administration" });
this.Add(new FinancialDataPoint { Spending = 80, Budget = 40, Label = "Sales" });
this.Add(new FinancialDataPoint { Spending = 30, Budget = 60, Label = "IT" });
this.Add(new FinancialDataPoint { Spending = 80, Budget = 40, Label = "Marketing" });
this.Add(new FinancialDataPoint { Spending = 40, Budget = 60, Label = "Development" });
this.Add(new FinancialDataPoint { Spending = 60, Budget = 20, Label = "CustomerSupport" });
}
}
public class DataItem
{
public string Label { get; set; }
public double Spending { get; set; }
public double Budget { get; set; }
}
以下のコードは、XamDataPieChart を追加し、IncludedProperties と ExcludedProperties、および LabelMemberPath と ValueMemberPath のコード スニペットとともにデータにバインドする方法を示しています。
XAML の場合:
<Grid x:Name="LayoutRoot" >
<Grid.Resources>
<local:Data x:Key="data" />
</Grid.Resources>
<ig:XamDataPieChart Name="DataPieChart"
ItemsSource="{StaticResource data}"
ExcludedProperties="Budget"
IncludedProperties="Label, Spending" />
</Grid>
その他の方法:
<Grid x:Name="LayoutRoot" >
<Grid.Resources>
<local:Data x:Key="data" />
</Grid.Resources>
<ig:XamDataPieChart Name="DataPieChart"
ItemsSource="{StaticResource data}"
LabelMemberPath="Label"
ValueMemberPath="Spending" />
</Grid>