XamDataChartコントロールの配置
NetAdvantage for Windows Phoneにおいて、チャートコントロールはInfragistics.Controls.Charts.XamDataChartクラスで表されます。このクラスはSystem.Windows.Controls.Controlクラスから派生したSilverlightコントロールです。よって、他のコントロールやUIElementと同じようにSilverlightアプリケーションのデザインに組み込めます。
XamDataChartコントロールをXAMLコードで記述するには、まずXML名前空間の宣言と同じ方法で、XamDataChartクラスが含まれるアセンブリ内のCLR名前空間に接頭辞を割り当てます。通常は、以下の行をXAMLコードのルート要素（phone:PhoneApplicationPage）に書き加える形となるでしょう。
xmlns:ig="clr-namespace:Infragistics.Controls.Charts;assembly=InfragisticsWP7.Controls.Charts.XamDataChart.v11.1"
これでXAMLコード内においてigという接頭辞からInfragistics.Controls.Charts名前空間にアクセスできます。接頭辞の名前は一意であれば任意です。
<ig:XamDataChart Margin="20">
//各種プロパティの設定...
</ig:XamDataChart>
上のコードはXAML上でXamDataChartコントロールを宣言したものです。まだこの時点では、チャートの種類や関連付けるデータを指定していないため機能しません。XamDataChart要素の中に、デザインやデータとの関係を記述していきます。
軸の設定
チャートを表示するには、水平方向（X座標）と垂直方向（Y座標）に沿って表示される軸を設定しなければなりません。軸はAxis抽象クラスによって表され、軸の種類ごとに派生クラスの実装が用意されています。生成した軸を設定するにはXamDataChartクラスのAxesプロパティから軸のコレクションを管理するAxisCollectionオブジェクトを取得し、これにAxisオブジェクトを追加します。
チャートに設定する軸の種類は、後述するシリーズの種類によって制約があります。本稿では、最も標準的なチャートとなるカテゴリシリーズを中心にデザインするため、カテゴリシリーズで使用可能な軸を選択します。カテゴリシリーズで使用する軸は、主に数値を並べるNumericXAxisクラスとNumericYAxisクラスを使った配置となります。このほか、テキストラベルを並べるCategoryXAxis等が用いられます。
-
Axis - Control クラフから派生した軸を表す抽象クラス
-
NumericAxisBase - 数値軸を表す基底抽象クラス
- NumericXAxis - 水平数値軸
- NumericYAxis - 垂直数値軸
-
CategoryAxisBase - カテゴリベース軸の基底抽象クラス
- CategoryXAxis - 水平カテゴリ軸
-
NumericAxisBase - 数値軸を表す基底抽象クラス
一般的なチャートでは水平軸にCategoryXAxisクラスを用いて項目名や日付など非数値のテキスト情報を表示し、垂直軸にNumericYAxisを用いてデータの値を表示することになるでしょう。
軸に表示される数値やテキストのスタイルはAxisクラスのLabelSettingsプロパティを通して設定できます。このプロパティに軸ラベルのスタイル情報を提供するAxisLabelSettingsクラスのオブジェクトを設定することで、ラベルの位置や色、フォントを変更できます。
CategoryAxisBaseクラスでは、カテゴリとして表示するラベルのテキストに関連付けるためのコレクション（IEnumerable）をItemSourceプロパティに設定し、ラベルとして表示する書式文字列をLabelプロパティに設定します。これらの設定によって、対象のデータソースから動的に軸に表示する値をレイアウトしてくれます。Windows Phone 7では、マルチタッチのジェスチャーによるチャートの伸縮がビルドインで有効になっていますが、チャートの伸縮による軸の調整も自動的に行ってくれます。
<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>
この場では、先ほどDataContextプロパティに設定した配列にバインディングし、水平軸にDateTimeプロパティから得られる値で「月/日」という形で日付を並べるよう指定しています。
同様に垂直軸にもNumericYAxisクラスを設定します。Y軸の値は後述するシリーズにバインディングされている値が割り当てられるため、特に設定するべき項目はありません。LabelSettingsプロパティから、ラベルの色などを調整する程度で良いでしょう。
<ig:NumericYAxis x:Name="xmYAxis">
<ig:NumericYAxis.LabelSettings>
<ig:AxisLabelSettings Foreground="Orange" Location="OutsideLeft" FontSize="20" />
</ig:NumericYAxis.LabelSettings>
</ig:NumericYAxis>
ここで宣言した軸は、後述するシリーズからバンディングされるため名前を付けておきます。
チャートが持つAxesプロパティはコレクションなので、必要であれば任意の数の軸をチャートに追加することができます。例えば、水平軸の日付に重ねて、別の項目の値を並べることも可能です。
データに応じて柔軟なチャートのレイアウトが可能です。
