CodeZine(コードジン)

特集ページ一覧

手の位置をチャートで可視化しよう

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

チャートを加工する

 設置直後の定義から次のようなデザインに変更します。

図3 画面デザイン
図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に表示する値を直接記載していますので、これではリアルタイムに変化させることができません。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(ComponentOne Studio)

もっと読む

著者プロフィール

  • 初音玲(ハツネアキラ)

     国内SIerのSEでパッケージ製品開発を主に行っており、最近は、空間認識や音声認識などを応用した製品を手掛けています。  個人的には、仕事の内容をさらに拡張したHoloLensなどのMRを中心に活動しています。  Microsoft MVP for Windows Development...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5