Visual Studio | WPF > グラフ > LiveChartsで時系列グラフを描画

動作環境

Windows 8.1 Pro (64bit)
Microsoft Visual Studio 2017 Community
Sublime Text 2

関連

Visual Studio | WPF > グラフ > LiveChartsでグラフ描画を試した

概要

時系列グラフにする。

• 1秒タイマー link
• タイマー処理ごとにポイントを追加する

code

https://lvcharts.net/App/examples/v1/wpf/Date%20Time
上記のリンクのコードをもとに時系列処理にしてみた。

MainWindow.xaml

<Window x:Class="_171115_t1550_graph.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:_171115_t1550_graph"
        xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <lvc:CartesianChart Series="{Binding Series}">
            <lvc:CartesianChart.AxisX>
                <lvc:Axis LabelFormatter="{Binding Formatter}"></lvc:Axis>
            </lvc:CartesianChart.AxisX>
        </lvc:CartesianChart>
    </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 LiveCharts;
using LiveCharts.Wpf;
using LiveCharts.Configurations;
using System.Windows.Threading;

namespace _171115_t1550_graph
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        DispatcherTimer myTimer;
        private Random rndGen;

        public MainWindow()
        {
            InitializeComponent();

            // 1. 1秒タイマーの設定
            myTimer = new DispatcherTimer(DispatcherPriority.Normal);
            myTimer.Interval = new TimeSpan(0, 0, 1);
            myTimer.Tick += myTimer_Tick;

            // 2. グラフ設定
            var dayConfig = Mappers.Xy<DateModel>()
                .X(dayModel => (double)dayModel.DateTime.Ticks / TimeSpan.FromHours(1).Ticks)
                .Y(dayModel => dayModel.Value);

            Series = new SeriesCollection(dayConfig)
            {
                new LineSeries
                {
                    Values = new ChartValues<DateModel>{ },
                    Fill = Brushes.Transparent
                },
            };

            Formatter = value => new System.DateTime((long)(value * TimeSpan.FromHours(1).Ticks)).ToString("t");

            DataContext = this;

            // 3. 乱数設定
            rndGen = new System.Random(100);

            // 4. タイマー開始
            myTimer.Start();
        }

        void myTimer_Tick(object sender, EventArgs e)
        {
            var value = rndGen.Next();
            Series[0].Values.Add(new DateModel { DateTime = System.DateTime.Now, Value = value });
        }

        public class DateModel
        {
            public System.DateTime DateTime { get; set; }
            public double Value { get; set; }
        }
        public Func<double, string> Formatter { get; set; }
        public SeriesCollection Series { get; set; }

    }
}

数分間描画させた例。

横軸の時間幅がおかしい。
(17:21と17:22は1分、17:22と17:24は2分。等間隔でない)。