Yuki Mita

デベロッパーサポート担当
Twitter : @ig_yuki
xamDataGrid と xamDataChart で簡易 BI アプリケーションを作る

先日の記事では xamDataGrid にテンプレート列を作成する方法を紹介致しました。この記事で利用した xamDataGrid に、xamDataChart を加えて簡易な BI アプリケーションを作ってみます。


xamDataChart の定義

<ig:XamDataChart Name="xamDataChart1" Title="Personal Score">
    <ig:XamDataChart.Axes>
        <ig:CategoryXAxis x:Name="xmXAxis"
                          ItemsSource="{Binding Path=., Mode=TwoWay}"
                          Label="{}{PersonName}"
                          >
        </ig:CategoryXAxis>
        <ig:NumericYAxis x:Name="xmYAxis" MinimumValue="0" MaximumValue="500">
        </ig:NumericYAxis>
    </ig:XamDataChart.Axes>
    <ig:XamDataChart.Series>
        <ig:ColumnSeries ItemsSource="{Binding Path=., Mode=TwoWay}"
                         ValueMemberPath="JanValue"
                         XAxis="{Binding ElementName=xmXAxis}"
                         YAxis="{Binding ElementName=xmYAxis}"
                         IsTransitionInEnabled="True"
                         TransitionDuration="00:00:00:0.3"
                         />
        <ig:ColumnSeries ItemsSource="{Binding Path=., Mode=TwoWay}"
                         ValueMemberPath="FebValue"
                         XAxis="{Binding ElementName=xmXAxis}"
                         YAxis="{Binding ElementName=xmYAxis}"
                         IsTransitionInEnabled="True"
                         TransitionDuration="00:00:00:0.3"
                         />
        <ig:ColumnSeries ItemsSource="{Binding Path=., Mode=TwoWay}"
                         ValueMemberPath="MarValue"
                         XAxis="{Binding ElementName=xmXAxis}"
                         YAxis="{Binding ElementName=xmYAxis}"
                         IsTransitionInEnabled="True"
                         TransitionDuration="00:00:00:0.3"
                         />
        <ig:ColumnSeries ItemsSource="{Binding Path=., Mode=TwoWay}"
                         ValueMemberPath="AprValue"
                         XAxis="{Binding ElementName=xmXAxis}"
                         YAxis="{Binding ElementName=xmYAxis}"
                         IsTransitionInEnabled="True"
                         TransitionDuration="00:00:00:0.3"
                         />
    </ig:XamDataChart.Series>
</ig:XamDataChart>

 


データソース

バインドするデータは xamDataGrid と同じくアプリケーションの DataContext を参照します。


軸の要件

ここでは列シリーズ(ColumnSeries)を用いて垂直方向に伸びるバーグラフを表示します。列シリーズは X 軸方向にはデータモデルにある文字型のプロパティ値をカテゴリ名として順に表し、Y 軸方向にはデータモデルにある数値型のプロパティ値を表します。このため X 軸には CategoryXAxis、Y 軸には連続するデータを表せるよう NumericYAxis を定義します。X 軸の CategoryXAxis はデータソースからどの項目を X 軸として表示するかを決めるため ItemsSource プロパティの指定を行います。CategoryXAxis の Label プロパティにはデータソースのどのプロパティを表示するかを指定します。

※軸の要件に関する詳細はオンラインヘルプをご覧になれます。


シリーズ

各列シリーズは ItemsSource プロパティにデータソースを参照します。XAxis と YAxis にはそれぞれ CategoryXAxis と NumericYAxis のインスタンスを参照します。ValueMemberPath プロパティではデータソースの内、どのプロパティの値をグラフに表示するかを指定します。(上記 XAML コードにある IsTransitionInEnabled プロパティと TransitionDuration プロパティはチャートのアニメーション効果を設定するプロパティですので、これらプロパティはチャート表示の必須項目ではありません。)

 

実行結果

個人成績に見立てたアプリケーションを作成することができました。xamDataGrid のセル値を変更すると、変更通知が発生して xamDataChart にも変更内容が反映されます。

xamDataGrid xamDataChart BI アプリケーション

 

サンプルはこちらから
xamDataGrid_xamDataChart_Integration_CS.zip
xamDataGrid_xamDataChart_Integration_VB.zip
(本サンプルは14.1バージョンで作成されました)


オンラインヘルプ


関連記事

xamDataGrid テンプレート列に画像やボタンコントロールを埋め込む

 

弊社製品は機能制限なしのトライアル版もご用意しています。ダウンロードはこちらから。
Infragistics 製品トライアルダウンロード

Anonymous comments are disabled