Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

デザインの改良

 データソースを変更することなく、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>
複数のシリーズを表示
複数のシリーズを表示

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



  • ブックマーク
  • 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