Silverlight Tooklit を使って折れ線グラフを出す方法のメモ

Silverlight 4 での開発環境と Tooklit  (2010/4版)の準備は終わっている前提で。

1.表示するデータを用意する。
表示するデータを保持するクラスとそのListを用意。
ここでは、time (x軸), planned (y1軸), result (y2軸) のプロパティを持つクラスと、そのリストを用意。

2. 表示領域を用意する。
Toolkit:Chat を表示領域に貼り付ける。大きさとか色はお好み。

3. グラフのタイトルと軸の作成
グラフタイトルは 貼り付けた Chart の Title プロパティ。
軸は  LinearAxis で、方向は Orientation プロパティで決める。
X軸とY軸なので、LinearAxis は二つは必要と言うことに。
作った LiearAxis を Chart.Axes に Add する。
最大値・最小値の設定が必要なら、 Minimum・Maximum プロパティで設定。

4. 線を用意する
線は LineSeries で。
Title プロパティで凡例に出す文字列を設定。

ItemSource プロパティに先ほどの1.で用意したリストを設定。 ItemSource は IEnumerable を受け取る、
IndependentValueBinding プロパティに、X軸方向に使用する項目の Binding を設定。こんな感じ。

serPlanned.IndependentValueBinding = new Binding("time");

DependentValueBinding も同様に、Y軸方向に使用する項目の Binding を設定。

同じく、作った LineSeries をChart.Series に Add する。

こうすると、取り敢えずグラフは出ます。

注意点としては、自分でグルグルとリストを回して、ポイントを作っていこうとは考えない方が良いと言うこと。Bind して全てを委ねた方がカンタンという話。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam Protection by WP-SpamFree