このトピックでは、XamDataChart™ コントロールで多次元データ (OnLine Analytical Processing (OLAP) データ) を表示する方法をコード例を示して説明します。
以下の表は、このトピックを理解するための前提条件として必要なトピックを示しています。
このトピックは、以下のセクションで構成されます。
XamDataChart に OLAP データを表示概要
XamDataChart コントロールに OLAP データを表示するためには、多次元データ セットを表示することに特化して設計された、特別なタイプの軸、OlapXAxis を構成する必要があります。XamDataChart に OLAP データを表示することは別として、OlapXAxis によってデータをドリルダウンして、シリーズがプロットされる値のためにデータ (列または行) から軸を選択することが可能となります。
OlapXAxis には、 xamPivotGrid コントロールのプロパティと似た DataSource プロパティがあります。このプロパティによって xamPivotGrid、XamDataChart でデータ ソースを使用することが可能となります。したがってグリッドに表示される同じデータをチャートで表示できます。以下の画像は同じデータ ソースにバインドされた XamPivotGrid と XamDataChart を示します(明確さのために画像にツールチップが追加されます)。
この手順は XamDataChart に OLAP データを表示するために必要な手順を説明します。
この手順で概略される特定の例はフラットなデータ ソースとチャートに表示されるサンプル コンテンツを生成するために営業データ サンプル (SalesDataSample クラス) を使用しています。データ ソースの構成方法の詳細については、「FlatDataSource の使用」トピックを参照してください。
手順では、ユーザーが列、行、フィルター、メジャーのための項目をデータ ソースから選択できるようにセレクターを追加することをオプションで提案します (手順 4)。このセレクターは xamPivotDataSelector コンポーネントのインスタンスから実装されます。
以下のスクリーンショットは最終結果のプレビューです。
この手順を実行するには、以下が必要です。
WPF Visual Studio 2013-2017 アプリケーション プロジェクト。
以下のアセンブリへの参照
InfragisticsWPF
InfragisticsWPF.DataVisualization
InfragisticsWPF.Olap
InfragisticsWPF.Olap.FlatData (フラットなデータを使用していない場合、それぞれのアセンブリを含む)
InfragisticsWPF.Controls.Grids.XamPivotGrid (XamPivotDataSelector を使用したい場合に限り必要)
InfragisticsWPF.Controls.Charts.XamDataChart
InfragisticsWPF.Controls.Charts.Olap
アプリケーションに追加された 営業データ サンプル リソースからの SalesDataSample クラス
以下はプロセスの概念的概要です。
1. データ ソースの構成
2.データ チャートを追加します。
3. OlapXAxis を構成します。
4. (オプション) ピボット データ セレクターを追加します。
階層とメジャーを割り当てるために XamPivotDataSelector コントロールを使用しないことを選択する場合、このために他のメカニズムを提供すべきです。または以下の例のように、列とメジャーとしていくつかの初期項目をデータ ソースに割り当てます。以下のコードはページ/ユーザー コントロールのリソースセクションに配置すべきです。
XAML の場合:
<models:SalesDataSample x:Key="DataSample"/>
<olap:FlatDataSource
x:Key="DataSource"
Columns="[Date].[Date]"
Measures="AmountOfSale, NumberOfUnits"
MeasureListLocation="Rows"
ItemsSource="{StaticResource DataSample}" />1. xamDataChart コントロールをページに追加します。 2. 必要な軸を追加します。
x-軸を追加します。 OlapXAxis を XamDataChart チャートの Axes コレクションに追加します。
x-軸を追加します。
NumericYAxis を XamDataChart チャートの Axes コレクションに追加します。
表示されるデータに数値が含まれているため、データ チャート シリーズを正しく表示するためにこのような Y 軸が必要です。
1.追加された Y 軸を OLAP-x-軸に添付します。
YAxis プロパティを前の手順で定義した NumericYAxis に設定します。
2.データ ソースを設定します。
DataSource プロパティを手順 1 で定義したデータ ソースに設定します。
3. データが読み取られるデータ軸を構成します。
これを実行するには、 OlapAxisSource プロパティを設定します。このプロパティはデータがデータ ソースの行から読み取られるのか、それともデータ ソースの列から読み取られるのかを決定します。
列を選択する場合、データ チャートの OlapXAxis にデータ ソースの各列が表示されます。行ごとに、データ チャート シリーズが生成され表示されます。XamDataChart に OLAP データを表示概要ブロックの図は、ピボット グリッド コントロールと OlapAxisSource が Columns に設定されている OLAP 軸を含むデータ チャートを示します。
4. シリーズ タイプの構成
シリーズ タイプを構成するには、 DefaultSeries プロパティを設定します(構成しない場合、デフォルトの列シリーズが表示されます)。
以下のコード スニペットはデータ チャートと同じデータ ソースにバインドされる XamPivotDataSelector コンポーネントを追加します。
XAML の場合:
<ig:Expander Grid.Column="1">
<ig:XamPivotDataSelector DataSource="{StaticResource DataSource}"/>
</ig:Expander>以下はこの手順の完全な XAML コードです。
XAML の場合:
<UserControl
…
xmlns:ig="http://schemas.infragistics.com/xaml"
xmlns:models="clr-namespace:Infragistics.Samples.Data.Models"
xmlns:olap="http://schemas.infragistics.com/olap">
<UserControl.Resources>
<models:SalesDataSample x:Key="DataSample"/>
<olap:FlatDataSource
x:Key="DataSource"
Columns="[Date].[Date]"
Measures="AmountOfSale, NumberOfUnits"
MeasureListLocation="Rows"
ItemsSource="{StaticResource DataSample}" />
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ig:XamDataChart OverviewPlusDetailPaneVisibility="Visible" HorizontalZoomable="True" VerticalZoomable="True">
<ig:XamDataChart.Axes>
<ig:OlapXAxis
YAxis="{Binding ElementName=YAxis}"
DataSource="{StaticResource DataSource}"
OlapAxisSource="Columns"
DefaultSeries="ColumnSeries"/>
<ig:NumericYAxis x:Name="YAxis" MinimumValue="0"/>
</ig:XamDataChart.Axes>
</ig:XamDataChart>
<!--<ig:Expander Grid.Column="1">
<ig:XamPivotDataSelector DataSource="{StaticResource DataSource}"/>
</ig:Expander>-->
</Grid>
</UserControl>このトピックの追加情報については、以下のトピックも合わせてご参照ください。