Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Windows Phoneで高速チャートを使用しデータの視覚化を実現しよう

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2011/07/14 14:00
目次

シリーズ

 シリーズはチャート内に表示される1つのデータ列を表します。シリーズはチャート上に表示するデータや軸とバインディングされ、シリーズの種類に応じてデータソースの値とマッピングされた結果がレンダリングされます。

 XamDataChartクラスのSeriesプロパティは、シリーズのコレクションを管理するSeriesCollectionクラスのオブジェクトを返します。Seriesプロパティが返したコレクションにシリーズを追加することで、チャート上に1つのデータ列を表示することができます。

 シリーズは以下のような種類(グループ)に分けられ、その種類に応じて扱いや軸やデータの制約、レンダリング結果が異なります。

  • カテゴリシリーズ
  • 散布図シリーズ
  • ポーラシリーズ
  • 財務シリーズ

 本稿では、カテゴリシリーズを中心に解説しますが、すべてのシリーズはSeriesクラスから派生しているため、基本的な扱いは共通しています。ただし、バインディングするプロパティはシリーズの種類に応じて適切に選択しなければなりません。大まかなシリーズの継承関係は、以下のような構造になっています。

  • Series - 全てのシリーズの抽象基底クラス
    • MarkerSeries - マーカーの抽象基底クラス
      • CategorySeries - カテゴリシリーズの抽象基底クラス
        • AnchoredCategorySeries - アンカーされたカテゴリシリーズの抽象基底クラス
      • ScatterBase - 散布図シリーズの抽象基底クラス
      • PolarBase - ポーラシリーズの抽象基底クラス
    • FinancialSeries - 財務シリーズの抽象基底クラス

 この場では、このうちのAnchoredCategorySeriesクラスから派生するAreaSeriesクラスを用いてデータを表示してみましょう。AreaSeriesは線グラフの一種をレンダリングしますが、線の下領域を塗りつぶします。

 シリーズにデータソースを関連付けるにはSeriesクラスのItemsSourceプロパティにコレクション(IEnumerable)を設定します。この場では、DataContextプロパティに設定したDataItemクラスの配列とバインディングさせます。指定したデータソースから、線グラフの項となるプロパティはAnchoredCategorySeriesクラスのValueMemberPathプロパティに文字列で指定します。

AreaSeriesクラス(XAML)
<ig:AreaSeries
    ItemsSource="{Binding}" ValueMemberPath="Value"
    XAxis="{Binding ElementName=xmXAxis}"
    YAxis="{Binding ElementName=xmYAxis}"
/>

 これで、チャートを表示するために必要なデータソースと軸、それに関連付けられたシリーズを作ることができました。これらをまとめたのが以下のXAMLコードとなります。

MainPage.xaml
<phone:PhoneApplicationPage 
    x:Class="Sample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ig="clr-namespace:Infragistics.Controls.Charts;assembly=InfragisticsWP7.Controls.Charts.XamDataChart.v11.1"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True"
>
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <ig:XamDataChart Margin="20">
            <ig:XamDataChart.Axes>
                <ig:CategoryXAxis x:Name="xmXAxis" ItemsSource="{Binding}" Label="{}{DateTime:MM/dd}">
                    <ig:CategoryXAxis.LabelSettings>
                        <ig:AxisLabelSettings Foreground="White" Location="OutsideBottom" />
                    </ig:CategoryXAxis.LabelSettings>
                </ig:CategoryXAxis>
                <ig:NumericYAxis x:Name="xmYAxis">
                    <ig:NumericYAxis.LabelSettings>
                        <ig:AxisLabelSettings Foreground="Orange" Location="OutsideLeft" FontSize="20" />
                    </ig:NumericYAxis.LabelSettings>
                </ig:NumericYAxis>
            </ig:XamDataChart.Axes>

            <ig:XamDataChart.Series>
                <ig:AreaSeries
                    ItemsSource="{Binding}" ValueMemberPath="Value"
                    XAxis="{Binding ElementName=xmXAxis}"
                    YAxis="{Binding ElementName=xmYAxis}"
                />
            </ig:XamDataChart.Series>
        </ig:XamDataChart>
    </Grid>
</phone:PhoneApplicationPage>

 以上で、チャートを表示するまでに必要最小限のコードが完成しました。プロジェクトをビルドして実行すると、ランダムに生成されたデータがチャートとして表示されることを確認できます。

実行結果
実行結果

 見た目はシンプルですが、こうしたチャートをデータに依存することなく表示する作業を標準機能だけで行うことは難しく、ここから自由にデータやロジックへの影響を最小限にデザインの調整ができる点がNetAdvantageの大きな魅力となっています。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 赤坂 玲音(アカサカ レオン)

    平成13年度「全国高校生・専門学校生プログラミングコンテスト 高校生プログラミングの部」にて最優秀賞を受賞。 2005 年度~ Microsoft Most Variable Professional Visual Developer - Visual C++。 プログラミング入門サイト Wis...

バックナンバー

連載:Infragistics NetAdvantageチュートリアル

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5