Visual Studio | WPF > OxyPlot > 時系列グラフの描画

動作環境

Windows 8.1 Pro (64bit)
Microsoft Visual Studio 2017 Community
OxyPlot.Wpf v1.0.0
Sublime Text 2

時系列データを描画するにはどうするか。

参考

• http://docs.oxyplot.org/en/latest/models/axes/DateTimeAxis.html
• Creating graphs in WPF using OxyPlot @ Bart De Meyer - Blog
• OxyPlotでグラフを表示させる際にハマったことまとめ

I appreciate your information.

実装内容

以下のようなことをするようだ

• DateTimeAxis型のdateAxisを生成
• _PlotModel.Axes.Add(dateAxis);にて横軸に設定
• series.Points.Add(new DataPoint(DateTimeAxis.ToDouble(wrkdt), yval));にてデータを追加する

code

MainWindow.xaml

<Window x:Class="_171127_t1800_timeSeries.MainWindow"
        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:_171127_t1800_timeSeries"
        xmlns:oxy="http://oxyplot.org/wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <oxy:PlotView Model="{Binding _PlotModel, Mode=OneWay}"/>
    </Grid>
</Window>

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
// 以下を追加
using OxyPlot;
using OxyPlot.Series;
using OxyPlot.Axes;

namespace _171127_t1800_timeSeries
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public PlotModel _PlotModel { get; private set; } = new PlotModel() { Title = "LineSeries" };

        public MainWindow()
        {
            InitializeComponent();
            graph_init();
        }

        private void graph_init()
        {
            var series = new LineSeries
            {
                StrokeThickness = 0.5,
            };

            // 時間軸設定
            if (DateTime.TryParse("2017/11/27 18:00", out DateTime axismin) == false ||
                DateTime.TryParse("2017/11/27 20:00", out DateTime axismax) == false)
            {
                return; // error
            }
            var dateAxis = new DateTimeAxis()
            {
                StringFormat = "HH:mm dd/MM/yyyy",
                MajorGridlineStyle = LineStyle.Solid,
                MinorGridlineStyle = LineStyle.Dot,
                Minimum = DateTimeAxis.ToDouble(axismin),
                Maximum = DateTimeAxis.ToDouble(axismax),
                IntervalLength = 80
            };
            _PlotModel.Axes.Add(dateAxis);

            // データ設定
            graph_add_series_addEach(series);
            _PlotModel.Series.Add(series);

            this.DataContext = this;
        }
        static readonly int kNumPoint = 3600; // 2時間分

        private void graph_add_series_addEach(LineSeries series)
        {
            var gen = new Random();
            var wrkdt = DateTime.Now;
            for (int idx = 0; idx < kNumPoint; idx++)
            {
                var yval = gen.NextDouble() * 10.0;
                series.Points.Add(new DataPoint(DateTimeAxis.ToDouble(wrkdt), yval));
                wrkdt += new TimeSpan(0, 0, 1); // h, m, s
            }
        }
    }
}

はまった点

var dateAxis = new DateTimeAxis(AxisPosition.Bottom, "Date", "dd/MM/yy HH:mm")
{
    MajorGridlineStyle = LineStyle.Solid,
    MinorGridlineStyle = LineStyle.Dot,
    IntervalLength = 80
};

上記の実装ではエラーが出た (引数の指定: AxisPosition.Bottomなど)。
OxyPlotのバージョンが古いときの書き方だったのかもしれない。

関連

• DateTimeAxis @ OxyPlot