Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

IoT時代の表現方法に最適なコントロールはこれ! FlexChartを利用してグラフを表示する

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2017/03/15 14:00

 IoT時代になり大量のデータからいかに傾向をつかんで全体像を把握できるか、また、特異点をいち早く違和感として認識して理由を調べられるかということが重要になってきています。そのようなときに必要なのは従来のような一覧表ではなく、グラフ表示などです。3回にわたって、さまざまなプラットフォームでグラフ表示ができるFlexChartを紹介していきたいと思います。第1回である今回は、WPFで利用できるFlexChart for WPFです。

目次

FlexChart for WPFとは

 FlexChart for WPFは、ComponentOne Studio for WPFに収録されているコンポーネントです。WPF用のコンポーネントなので、Direct3Dによる高速な描画が実現できますし、MVVMデザインパターン使って、グラフ部分とデータ部分を分離した構造のアプリケーションも作りやすくなっています。

FlexChartでグラフを表示するための準備

 それでは簡単なグラフをFlexChartで表示するアプリを早速作ってみましょう。

新規プロジェクト作成

 Visual Studio 2015を起動して[ファイル]-[新しいプロジェクト]メニューをクリックします。ダイアログが表示されるので[WPFアプリケーション]を選択して名前を付けて[OK]ボタンをクリックします。

 このとき、ツールボックスにはComponentOne Studio for WPFに含まれるさまざまなコンポーネントが追加されています。

図1 C1FlexChart
図1 C1FlexChart

ドラッグ&ドロップ

 新しいプロジェクトが作成できたら、ツールボックスからC1FlexChartをドラッグ&ドロップでMainWindow.xamlに配置します。

図2 C1FlexChartを配置
図2 C1FlexChartを配置
リスト1 配置直後のXAML
<Window xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:CZ1702FlexChart"
        x:Class="CZ1702FlexChart.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="600" Width="800">
    <Grid>
        <c1:C1FlexChart />
    </Grid>
</Window>

 この状態で起動すれば、X軸だけがひかれた画面が表示できます。

図3 初期状態での実行例
図3 初期状態での実行例

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

著者プロフィール

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

    国内SIerのSEで受託開発を主に行っています。Visual Basic + Oracleという組み合わせに関する事が得意です。 Internet of Thingsという名前もよく聞くようになってきてセンサーとクラウドという組み合わせに注目があつまっています。Kinectなどのモーションセンサー...

バックナンバー

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

もっと読む

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