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

デザインの改良

　データソースを変更することなく、XAMLコードを変更するだけでチャートのレイアウトを変更できます。NetAdvantage for Windows Phoneには豊富なシリーズの種類が用意されているため、シリーズの種類を選択するだけでグラフを変更できます。例えば、上記のXAMLコード内のAreaSeries要素の部分をColumnSeries要素に書き換えるだけで、棒グラフに置き換わります。ColumnSeriesクラスもまた、AreaSeriesクラスと同様にAnchoredCategorySeriesクラスから派生するカテゴリシリーズの一種です。

ColumnSeriesクラス（XAML）

<ig:ColumnSeries
    ItemsSource="{Binding}" ValueMemberPath="Value"
    XAxis="{Binding ElementName=xmXAxis}"
    YAxis="{Binding ElementName=xmYAxis}"
/>

列シリーズ

　同様に、折れ線グラフを表示したければLineSeriesクラスに置き換えるだけです。領域の塗りつぶしが行われないので、加えて線の太さと色を変えてみましょう。線の太さはSeriesクラスのThicknessプロパティから、塗りつぶしはSeriesクラスのBrushプロパティから変更できます。

LineSeriesクラス

<ig:LineSeries
    ItemsSource="{Binding}" ValueMemberPath="Value"
    XAxis="{Binding ElementName=xmXAxis}"
    YAxis="{Binding ElementName=xmYAxis}"
    Thickness="10" Brush="Red"
/>

折れ線シリーズ

　XamDataChartクラスのSeriesプロパティはコレクションなので、チャートに対して複数のシリーズを登録することができます。これによって1つのチャートで複数のグラフを並べて表示することができ、複数のデータの関係を分かりやすい形で視覚化できます。上記の列シリーズと折れ線シリーズを同時に表示すると、以下のようなコードになります。

複数のシリーズを追加する

<ig:XamDataChart.Series>
    <ig:ColumnSeries
        ItemsSource="{Binding}" ValueMemberPath="Value"
        XAxis="{Binding ElementName=xmXAxis}"
        YAxis="{Binding ElementName=xmYAxis}"
    />
    <ig:LineSeries
        ItemsSource="{Binding}" ValueMemberPath="Value"
        XAxis="{Binding ElementName=xmXAxis}"
        YAxis="{Binding ElementName=xmYAxis}"
        Thickness="10" Brush="Red"
    />
</ig:XamDataChart.Series>

複数のシリーズを表示

　上の例では同じデータソースを異なる複数のシリーズで表示した例です。当然、異なるデータソースをシリーズに割り当てることもできます。例えば、今年度と昨年度の同時期のデータを重ねて比較するなど、チャートを応用した視覚化によってデータの価値をアプリケーションによって高める工夫が可能になります。