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

シリーズ

　シリーズはチャート内に表示される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の大きな魅力となっています。