このトピックは、 xamPivotGrid と xamDataChart コントロールの間のインタラクションの構築方法を説明します。
以下は最終結果のプレビューです。OlapAxis のソースは列または行です。このスクリーンショットは列の階層的ビューを表示しています。列の階層の最上位レベルは「All Periods」ですが、これは年に続いて半年が含まれ、各半年に四半期が含まれるといった形になっています。PivotGrid と OlapAxis は同じデータ ソースにバインドされ、両者は同期されています。OlapAxis のレベルを拡張すると、PivotGrid の列階層が拡張され、その逆も同じようになります。
図: 最終結果のプレビュー
このトピックには次のセクションが含まれます:
コントロールの構成の概要
OlapAxis の DataSource の設定
OlapAxisSource タイプの定義
YAxis の定義
Series の定義
まず以下のトピックを読む必要があります。
xamDataChart コントロールは OlapAxis と呼ばれる新しい軸タイプを公開します。新しい軸は統合機能の主要要素である DataSource プロパティを公開します。DataSource プロパティはピボット グリッド (XMLADataSource or FlatDataSource) として同じデータ ソースにバインドできます。
以下の表はピボット グリッドに統合されることが求められる OlapAxis プロパティの構成可能な要素を列挙したものです。
以下の表は OlapAxi の DataSource プロパティに関する設定をマップします。ピボット グリッド データ バインディングについての詳細は XamPivotGrid のバインディング データを参照してください。
XAML の場合:
<ig:XamPivotGrid x:Name="pivotGrid"
DataSource="{StaticResource DataSource}" />
<ig:XamDataChart x:Name="xmOlapDataChart1" >
<ig:XamDataChart.Axes>
<igOlapAxis:OlapXAxis DataSource="{StaticResource DataSource}" />
</ig:XamDataChart.Axes>
</ig:XamDataChart>以下の表は OlapAxisSource に対するソースにタイプの設定をマップします。
XAML の場合:
<ig:XamPivotGrid x:Name="pivotGrid"
DataSource="{StaticResource DataSource}" />
<ig:XamDataChart x:Name="xmOlapDataChart1">
<ig:XamDataChart.Axes>
<igOlapAxis:OlapXAxis
DataSource="{StaticResource DataSource}"
OlapAxisSource="Rows"/>
</ig:XamDataChart.Axes>
</ig:XamDataChart>以下の表は Y 軸の設定をマップします。
XAML の場合:
<ig:XamPivotGrid x:Name="pivotGrid"
DataSource="{StaticResource DataSource}" />
<ig:XamDataChart x:Name="xmOlapDataChart1" >
<ig:XamDataChart.Axes>
<igOlapAxis:OlapXAxis
DataSource="{StaticResource DataSource}"
OlapAxisSource="Rows"
YAxis="{Binding ElementName=yAxis}"/>
<ig:NumericYAxis Name="yAxis"/>
</ig:XamDataChart.Axes>
</ig:XamDataChart>以下の表は両方の値 (True / False) に対する AutoGenerateSeries プロパティの設定をマップします。
次の例ではシリーズを自動的に生成するためにモードを使用します。データは OlapAxisSource プロパティで示される Rows または Columns に基づいて生成されます。
XAML の場合:
<ig:XamPivotGrid x:Name="pivotGrid"
DataSource="{StaticResource DataSource}" />
<ig:XamDataChart x:Name="xmOlapDataChart1" >
<ig:XamDataChart.Axes>
<igOlapAxis:OlapXAxis
DataSource="{StaticResource DataSource}"
OlapAxisSource="Rows"
YAxis="{Binding ElementName=yAxis}"
AutoGenerateSeries="True"/>
<ig:NumericYAxis Name="yAxis"/>
</ig:XamDataChart.Axes>
</ig:XamDataChart>次の例では AutoGenerateSeries が False に設定されている間に特殊タイプ OlapColumnSeries のユーザー定義シリーズを使用します。
XAML の場合:
<ig:XamPivotGrid x:Name="pivotGrid"
DataSource="{StaticResource DataSource}" />
<ig:XamDataChart x:Name="xmOlapDataChart1" >
<ig:XamDataChart.Axes>
<igOlapAxis:OlapXAxis
DataSource="{StaticResource DataSource}"
OlapAxisSource="Rows"
YAxis="{Binding ElementName=yAxis}"
AutoGenerateSeries="False"/>
<ig:NumericYAxis Name="yAxis"/>
</ig:XamDataChart.Axes>
<ig:XamDataChart.Series>
<ig:OlapColumnSeries
Title="Customized Title"
YAxis="{Binding ElementName=yAxis}"
OlapXAxis="{Binding ElementName=olapXAxis}" ValueMemberPath="Europe"/>
</ig:XamDataChart.Series>
</ig:XamDataChart>関連トピック