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

　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

ドラッグ＆ドロップ

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

図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　初期状態での実行例