Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

目次

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月平均気温の棒グラフ

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

著者プロフィール

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

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

バックナンバー

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

もっと読む

おすすめ記事

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