チャートを加工する
設置直後の定義から次のようなデザインに変更します。
図3 画面デザイン
全画面サイズに変更
初期設定では縦横の大きさや画面上での位置が明示的に指定されているため、画面全体を使ってグラフを表示できていません。そこで明示的なサイズ指定を削除して全画面表示に切り替えます。ただしこのままではタイトルにかかってしまうので、Grid.Rowも明示的に指定します。
リスト2 全画面サイズに変更
<Chart:C1Chart ChartType="Column" Grid.Row="1" Palette="Office">
これで目指すデザインと同じサイズで棒グラフが表示できます。
色合いを変更
初期状態の色合いも黒ベースで見やすいのですが色合いをExcelライクに近づけてみます。そのためにはThemeプロパティとPaletteプロパティを利用します。
リスト3 色合いを変更
<Chart:C1Chart ChartType="Column" Grid.Row="1" Theme="Office2007Blue" Palette="Metro">
これで白系バックのグラフに変更できました。この他にもさまざまな組込済テーマがありますので、好みに合ったテーマをさがしてみるとよいでしょう。
折れ線グラフに変更
それではグラフを折れ線グラフに変更してみましょう。
折れ線グラフへの変更はChartTypeをLineにすることで実現できます。
リスト4 折れ線グラフに変更
<Chart:C1Chart ChartType="Line" Grid.Row="1" Theme="Office2007Blue" Palette="Metro">
これで2種類の値が同時に表示されている折れ線グラフを表示させるところまでたどり着きました。
3種類の値を表示するように変更
2種類の折れ線を3種類の折れ線に変更するためには、DataSeriesを3つに増やします。
これまでの変更点も含め、C1ChartのXAML定義全体を再確認してみましょう。
リスト5 3種類の値を表示するように変更
<Chart:C1Chart ChartType="Line" Grid.Row="1" Theme="Office2007Blue" Palette="Metro">
<Chart:C1Chart.Data>
<Chart:ChartData>
<Chart:ChartData.Children>
<Chart:DataSeries Label="X" Opacity="1" Values="20 22 19 24 25"/>
<Chart:DataSeries Label="Y" Opacity="1" Values="8 12 10 12 15"/>
<Chart:DataSeries Label="Z" Opacity="1" Values="10 12 15 8 12 "/>
</Chart:ChartData.Children>
</Chart:ChartData>
</Chart:C1Chart.Data>
<Chart:C1ChartLegend Position="Right" VerticalContentAlignment="Center"/>
</Chart:C1Chart>
さて、ここまで画面デザインができたところで大きな疑問がわいてくると思います。ここが今回のサンプルの最大の難関で、ヘルプをざっと眺めてみてみただけでは解決する方法がみつからなかったポイントになります。
それは「どうやって計測値をC1Chartに渡すのか」ということです。現時点ではXAMLに表示する値を直接記載していますので、これではリアルタイムに変化させることができません。
