Windows Phone 7.1 簡単なグラフ表示部品

MSC2011 D1-401セッションのセンサーデモで披露したセンサー計測値のグラフ表示部品を解説します。基本Silverlihgtのコントロールなので、ちょっとしたグラフを表示したいというSilverlightアプリで活用可能です。
実際のコードは、https://mangosensorchecker.codeplex.com/ の GraphPart.csで公開されているのでそちらを参照してください。

※もっとプロっぽい種類が豊富なグラフが欲しい方は、有料で部品を販売しているメーカもあるので、そちらを検討してみてください。

詳しいコードは、紹介したサイトの”Source Code”タブで、GraphPart.csの中身を見ていただくとして、ここでは骨格だけの紹介にとどめます。

Canvasを継承したクラスを作って以下のメンバー変数を加えます。

private List<Point> points = new List<Point>();

Pointは、System.Windows名前空間のクラスです。double型のXとYの2つの値を格納できます。センサーから挙がってきたデータの計測時間(Timestamp)をXに、グラフ表示したい計測値をYに入れて、順次保持していきます。
この処理を担当しているのが、AddPointメソッドです。

そしてDrawGraphメソッドでpointsに蓄積したデータのYの最大値と最小値を元に上下の単位あたりの長さを決めて、Lineクラスのインスタンスを作ってCanvas上の位置を決めて、Childrenプロパティに追加していきます。

for (int i = 1; i < points.Count; i++)
{
    Line line = new Line();
    line.X1 = valueX;
    line.Y1 = valueY;
    valueX = (points[i].X - points[0].X) / UnitWidth;
    valueY = this.ActualHeight *VerticalLevel - points[i].Y * unitHeight;
    line.X2 = valueX;
    line.Y2 = valueY;
    line.StrokeThickness = 4;
    line.Stroke = new SolidColorBrush(DotColor);
    this.Children.Add(line);
}

まぁ、こんな感じですね。

リストに格納されたデータ数が多くなると描画は遅くなります。なので計測した値をリアルタイムに描画するのはちょっと無理です。Silverlightではこれが限界かと。機会があればXNAを使ったものも検討してみます。

GraphPart.csのソースコードは、こちらから。 https://mangosensorchecker.codeplex.com/SourceControl/changeset/view/5185#185892