LiveCharts2 の線グラフでX軸に日付を利用する

概要

• LiveCharts2で日付を表示するには一工夫必要でしたので、その記録となります。
  • 日付を数値として扱い、表示を変更する関数を指定することになります。

コード

概要

• LiveCharts2には、DateTimePoint というものがありますが、こちらを利用してX軸に日付を表示する方法がわかりませんでした。
  • 日付が数値として入ってきますが、OADateの数値ではないようです。
• おそらくもっといい例はあると思いますので、コメントで頂けると助かります。

フレームワーク

• WinForms
• .NET Framework 4.7.2
• .NET Standard 2.0
  • https://docs.microsoft.com/ja-jp/dotnet/standard/net-standard

参照

• LiveChartsCore.SkiaSharpView.WinForms
  • 現時点では、プレリリースを含めるにチェックを入れる必要がある

グラフ側

Form1.vb

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles Me.Load
        Dim viewModel1 = New ViewModels.FrmDashBoard.Lines.ViewModel()
        CartesianChart1.Series = viewModel1.Series
        CartesianChart1.ZoomMode = LiveChartsCore.Measure.ZoomAndPanMode.Both
        CartesianChart1.LegendPosition = LiveChartsCore.Measure.LegendPosition.Right
        CartesianChart1.XAxes = viewModel1.XAxes
    End Sub

モデル側（Visual Basic）の場合

ViewModel.vb

Imports LiveChartsCore
Imports LiveChartsCore.Defaults
Imports LiveChartsCore.SkiaSharpView

Public Class ViewModel
    Public ReadOnly Property XAxes As List(Of Axis)
        Get
            Dim labeler = Function(d1 As Double) String.Format("{0:yyyy/MM/dd}", System.DateTime.FromOADate(d1))

            Return New List(Of Axis) From {
                    New Axis With {
                    .Labeler = labeler,
                    .LabelsRotation = -45
                }
            }
        End Get
    End Property

    Public ReadOnly Property Series As ISeries()
        Get
            Dim li As New List(Of ISeries) From {
                New LineSeries(Of ObservablePoint) With {
                    .Values = New ObservablePoint() {
                        New ObservablePoint(New System.DateTime(2021, 1, 2).ToOADate(), 2),
                        New ObservablePoint(New System.DateTime(2021, 1, 3).ToOADate(), 2),
                        New ObservablePoint(New System.DateTime(2021, 1, 5).ToOADate(), 3),
                        New ObservablePoint(New System.DateTime(2021, 1, 8).ToOADate(), 2),
                        New ObservablePoint(New System.DateTime(2021, 1, 21).ToOADate(), 5),
                        New ObservablePoint(New System.DateTime(2021, 2, 3).ToOADate(), 2),
                        New ObservablePoint(New System.DateTime(2021, 3, 3).ToOADate(), 8),
                        New ObservablePoint(New System.DateTime(2021, 4, 5).ToOADate(), 4)
                    }
                }
            }

            Return li.ToArray
        End Get
    End Property
End Class

モデル側（C#, .NET Standard 2.0）の場合

ViewModel.cs

using LiveChartsCore;
using LiveChartsCore.Defaults;
using LiveChartsCore.SkiaSharpView;
using System.Collections.Generic;

namespace QnamakerManage.ViewModels.FrmDashBoard.Lines
{
    public class ViewModel
    {
        public List<Axis> XAxes
        {
            get
            {
                System.Func<double, string> labeler = d1 => string.Format("{0:yyyy/MM/dd}", System.DateTime.FromOADate(d1));

                return new List<Axis>
                {
                    new Axis()
                    {
                        Labeler = labeler,
                        LabelsRotation = -45
                    }
                };
            }
        }

        public ISeries[] Series { get; set; }
            = {
            new LineSeries<ObservablePoint>
            {
                Values = new ObservablePoint[]
                {
                    new ObservablePoint(new System.DateTime(2021,1,2).ToOADate() , 2),
                    new ObservablePoint(new System.DateTime(2021,1,3).ToOADate() , 2),
                    new ObservablePoint(new System.DateTime(2021,1,5).ToOADate() , 3),
                    new ObservablePoint(new System.DateTime(2021,1,8).ToOADate() , 2),
                    new ObservablePoint(new System.DateTime(2021,1,21).ToOADate() , 5),
                    new ObservablePoint(new System.DateTime(2021,2,3).ToOADate() , 2),
                    new ObservablePoint(new System.DateTime(2021,3,3).ToOADate() , 8),
                    new ObservablePoint(new System.DateTime(2021,4,5).ToOADate() , 4),
                }
            }
        };
    }
}

実行結果