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

FlexChart for WPFで平均気温のデータを表示する

データの準備

 今回は、気象庁の過去の気象データ検索サイトに掲載されている東京の平均気温をサンプルデータとして使います。

 必須ではありませんがMVVMデザインパターンの慣例に合わせてプロジェクトにModelsフォルダを作成します。そして、Modelsフォルダの中にDataModelクラスを新規に追加します。今回はデータを直接コードに記載していますが、もちろんデータベースから値を取得することも可能です。DataModelクラスの実装はどこからデータを取得するかによって変わりますが、その外部IFが変わらなければC1FlexChartからの見え方は変わりません。

リスト2 DataModelクラス
using System.Collections.ObjectModel;

namespace CZ1702FlexChart.Models
{
    class DataModel
    {
        public ObservableCollection<DataItem> TempData { get; set; }

        public void CreateData()
        {
            this.TempData = new ObservableCollection<DataItem>();
            this.TempData.Add(new DataItem(1888, 3.3, 2.2, 7.2, 12.4, 16, 18.6, 24.5, 25.6, 20.9, 15, 11.4, 5.2));
		:
	  (中略)
		:
            this.TempData.Add(new DataItem(2016, 6.1, 7.2, 10.1, 15.4, 20.2, 22.4, 25.4, 27.1, 24.4, 18.7, 11.4, 8.9));
        }
    }

    public class DataItem
    {
        public DataItem(int year, double jan, double feb, double mar, double apr, double may, double jun, double jul, double aug, double sep,double oct,double nov,double dec)
        {
            Year = year;
            Jan = jan;
            Feb = feb;
            Mar = mar;
            Apr = apr;
            May = may;
            Jun = jun;
            Jul = jul;
            Aug = aug;
            Sep = sep;
            Oct = oct;
            Nov = nov;
            Dec = dec;
        }

        public int Year { get; set; }
        public double Jan { get; set; }
        public double Feb { get; set; }
        public double Mar { get; set; }
        public double Apr { get; set; }
        public double May { get; set; }
        public double Jun { get; set; }
        public double Jul { get; set; }
        public double Aug { get; set; }
        public double Sep { get; set; }
        public double Oct { get; set; }
        public double Nov { get; set; }
        public double Dec { get; set; }
    }
}

データとC1FlexChartを接続

 作成したデータをC1FlexChartに接続するコードをMainWindow.xmal.csに記述します。

リスト3 MainWindowMainWindow.xaml.csクラス
using System.Collections.ObjectModel;
using System.Windows;

namespace CZ1702FlexChart
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            // データソースをXAMLと接続する
            this.DataContext = Data;
        }

        // データを取得する
        private ObservableCollection<Models.DataItem> _Data;
        public ObservableCollection<Models.DataItem> Data
        {
            get
            {
                if (_Data == null)
                {
                    var model = new Models.DataModel();
                    model.CreateData();
                    _Data = model.TempData;
                }
                return _Data;
            }
        }
    }
}

 ポイントはDataModelで作成した値の入ったTempDataをDataContextに割り当てることです。これでXAML定義の中でTempDataの値を参照することができます。

 XAML定義のC1FlexChart部分を次のように変更します。

リスト4 MainWindowMainWindow.xamlの変更(抜粋)
        <c1:C1FlexChart BindingX="Year" ItemsSource="{Binding Data}">
            <c1:C1FlexChart.Series>
                <c1:Series SeriesName="1月" Binding="Jan" />
            </c1:C1FlexChart.Series>
        </c1:C1FlexChart>

 ItemSourceとしてMainWindow.xaml.csにある「Data」変数を指定し、横軸として「Year」を指定します。試し実行なので、まずは「Jan」だけをデータとして定義します。

サンプルの実行

 ここまでできたら[デバッグ]-[デバッグの実行]メニューをクリックして実行してみましょう。1月の平均気温を棒グラフで表示した画面が表示できるはずです。

図4 東京の1月平均気温の棒グラフ
図4 東京の1月平均気温の棒グラフ

FlexChart for WPFで扱えるグラフ

 「東京の1月平均気温」だけであれば棒グラフでもよいかもしれません。しかし、年ごとの1月~12月までをグラフ表示するのであれば折れ線グラフの方が分かりやすいでしょう。もちろん、C1FlexChartは棒グラフだけではなく折れ線グラフもサポートしています。

 折れ線グラフにしたいときはXAML定義を次のように変更します。

リスト5 折れ線グラフ定義
        <c1:C1FlexChart BindingX="Year" ItemsSource="{Binding Data}"
                        ChartType="Line">
            <c1:C1FlexChart.Series>
                <c1:Series SeriesName="1月" Binding="Jan" />
            </c1:C1FlexChart.Series>
        </c1:C1FlexChart>
図5 東京の1月平均気温の折れ線グラフ
図5 東京の1月平均気温の折れ線グラフ

 このようにChartTyepプロパティを変更するだけでグラフの種類を手軽に変更できます。C1FlexChartがサポートしているグラフとChartTypeの指定値は次のようになっています。

グラフ ChartType
面グラフ Area
横棒グラフ Bar
バブルチャート Bubble
縦棒グラフ Column(省略値)
株価チャート Candlestick
HighLowOpenClose
折れ線グラフ Line
折れ線シンボルグラフ LineSymbols
散布図 Scatter
スプライングラフ Spline
スプライン面グラフ Spline
スプラインシンボルグラフ SplineSymbols

 グラフの種類一覧をみてお気づきの方もいると思いますが、C1FlexChartには円グラフがありません。円グラフはFlexChart for WPFに含まれる、もう一つのコンポーネントであるC1FlexPieコンポーネントを使用します。C1FlexChartは変化を表すグラフ、C1FlexPieは割合を表すグラフのように目的が違うものを別コンポーネントにすることでプロパティなどもわかりやすくなっています。また、マルチレベル円グラフはC1Sunburstコンポーネント、レーダーチャートならC1FlexRadarコンポーネントがそれぞれ担当しています。

まとめ

 今回はFlexChart for WPFの基本的な使い方をご紹介しました。サンプルを作成してみてわかるのはXAMLをあまり記述しなくても目的のグラフが表示できるという点です。これは、指定できる機能が少ないということではなく各プロパティの規定値が適切であり、規定値のまま=プロパティ指定なしでも目的のグラフが表示できるということです。

 WPFには標準でグラフ表示機能がないため、C1FlexChartを使わないのであれば1本1本線を描画するなど極めて非効率的な方法で実装するしかありません。しかし、それだけではなく、さまざまな機能を有しつつ適切な規定値で手軽に使えるバランスの良さもFlexChart for WPFの魅力の一つです。

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

著者プロフィール

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

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

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