X軸のDateAxisとDateModelでCartesianChartを使用する

Question

時間の経過とともに伸びる一連の値を持つグラフを描画する必要があります。値の間の時間間隔は不規則です（数秒）。このため私はDate Time tutorialのライブラリLiveChart.WpfとGitHub（DateAxisExample.xamlとDateAxisExample.xaml.cs）の日付軸の例を使用しています。

これはXAMLです：

<UserControl x:Class="Wpf.Charts.SensorChart" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf" 
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"> 
    <Grid> 
     <lvc:CartesianChart Series="{Binding SeriesCollection}" LegendLocation="Left"> 
      <lvc:CartesianChart.AxisX> 
       <lvc:DateAxis Title="Time" 
           InitialDateTime="{Binding InitialDateTime}" 
           Period="{Binding Period}" 
           SelectedWindow="{Binding SelectedWindow}" 
           LabelFormatter="{Binding Formatter}"> 
       </lvc:DateAxis> 
      </lvc:CartesianChart.AxisX> 
     </lvc:CartesianChart> 
    </Grid> 
</UserControl> 

そして、背後にある、この私のコード：

using LiveCharts; 
using LiveCharts.Configurations; 
using LiveCharts.Helpers; 
using LiveCharts.Wpf; 
using System; 
using System.Windows.Controls; 

namespace Wpf.Charts 
{ 
    public partial class SensorChart : UserControl 
    { 
     public SeriesCollection SeriesCollection { get; set; } 
     public DateTime InitialDateTime { get; set; } 
     public PeriodUnits Period { get; set; } 
     public IAxisWindow SelectedWindow { get; set; } 
     private Func<double, string> Formatter { get; set; } 

     public SensorChart() 
     { 
      InitializeComponent(); 
      this.SetChartModelValues(); 
      this.DataContext = this; 
     } 

     private void SetChartModelValues() 
     { 
      var dayConfig = Mappers.Xy<ChartModel>() 
        .X(dayModel => (double)dayModel.DateTime.Ticks/TimeSpan.FromSeconds(1).Ticks) 
        .Y(dayModel => dayModel.Value); 

      DateTime now = DateTime.Now; 
      now = new DateTime(now.Year, now.Month, now.Day, now.Hour, now.Minute, now.Second); 

      this.SeriesCollection = new SeriesCollection(dayConfig) 
      { 
       new LineSeries() 
       { 
        Values = new ChartValues<ChartModel>() 
        { 
         new ChartModel(now.AddSeconds(5), 3), 
         new ChartModel(now.AddSeconds(10), 6), 
         new ChartModel(now.AddSeconds(15), 8), 
         new ChartModel(now.AddSeconds(20), 4), 
         new ChartModel(now.AddSeconds(55), 7), 
         new ChartModel(now.AddSeconds(60), 2), 
         new ChartModel(now.AddSeconds(65), 6), 
         new ChartModel(now.AddSeconds(70), 8), 
         new ChartModel(now.AddSeconds(75), 4), 
         new ChartModel(now.AddSeconds(80), 7), 
         new ChartModel(now.AddSeconds(105), 3), 
         new ChartModel(now.AddSeconds(110), 6), 
         new ChartModel(now.AddSeconds(115), 8), 
         new ChartModel(now.AddSeconds(120), 4), 
         new ChartModel(now.AddSeconds(155), 7), 
         new ChartModel(now.AddSeconds(160), 2), 
         new ChartModel(now.AddSeconds(165), 6), 
         new ChartModel(now.AddSeconds(170), 8), 
         new ChartModel(now.AddSeconds(175), 4), 
         new ChartModel(now.AddSeconds(180), 7), 
        } 
       } 
      }; 
      //foreach() 

      this.InitialDateTime = now; 
      this.Period = PeriodUnits.Seconds; 
      this.SelectedWindow = new DateAxisWindows.FifteenSecondsAxisWindow(); 
      this.Formatter = this.DateLabelFormater; 
     } 

     private string DateLabelFormater(double value) 
     { 
      DateTime dateTime = new DateTime((long)(value * TimeSpan.FromSeconds(1).Ticks)); 
      return dateTime.ToString("HH:mm:ss"); 
     } 
    } 

    public class ChartModel 
    { 
     public DateTime DateTime { get; set; } 
     public double Value { get; set; } 

     public ChartModel(DateTime dateTime, double value) 
     { 
      this.DateTime = dateTime; 
      this.Value = value; 
     } 
    } 
} 

しかし、私はアプリケーションを実行する際には、年間4036の日付を表示します。何が起きているのか知っていますか？

Answer 1

あなたが実際の値を表示したい場合は、これを試してみてください：

public partial class SensorChart : UserControl 
{ 
    public SeriesCollection SeriesCollection { get; set; } 
    public DateTime InitialDateTime { get; set; } 
    public Func<double, string> Formatter { get; set; } 

    public SensorChart() 
    { 
     InitializeComponent(); 
     this.SetChartModelValues(); 
     this.DataContext = this; 
    } 

    private void SetChartModelValues() 
    { 
     var dayConfig = Mappers.Xy<ChartModel>() 
          .X(dayModel => dayModel.DateTime.Ticks) 
          .Y(dayModel => dayModel.Value); 


     DateTime now = DateTime.Now; 

     this.SeriesCollection = new SeriesCollection(dayConfig) 
     { 
      new LineSeries() 
      { 
       Values = new ChartValues<ChartModel>() 
       { 
        new ChartModel(now.AddSeconds(5), 3), 
        new ChartModel(now.AddSeconds(10), 6), 
        new ChartModel(now.AddSeconds(15), 8), 
        new ChartModel(now.AddSeconds(20), 4), 
        new ChartModel(now.AddSeconds(55), 7), 
        new ChartModel(now.AddSeconds(60), 2), 
        new ChartModel(now.AddSeconds(65), 6), 
        new ChartModel(now.AddSeconds(70), 8), 
        new ChartModel(now.AddSeconds(75), 4), 
        new ChartModel(now.AddSeconds(80), 7), 
        new ChartModel(now.AddSeconds(105), 3), 
        new ChartModel(now.AddSeconds(110), 6), 
        new ChartModel(now.AddSeconds(115), 8), 
        new ChartModel(now.AddSeconds(120), 4), 
        new ChartModel(now.AddSeconds(155), 7), 
        new ChartModel(now.AddSeconds(160), 2), 
        new ChartModel(now.AddSeconds(165), 6), 
        new ChartModel(now.AddSeconds(170), 8), 
        new ChartModel(now.AddSeconds(175), 4), 
        new ChartModel(now.AddSeconds(180), 7), 
       } 
      } 
     }; 

     this.InitialDateTime = now; 
     this.Formatter = value => new DateTime((long)value).ToString("yyyy-MM:dd HH:mm:ss"); 
    } 
} 

XAML：

<lvc:CartesianChart Series="{Binding SeriesCollection}" LegendLocation="Left"> 
    <lvc:CartesianChart.AxisX> 
     <lvc:Axis LabelFormatter="{Binding Formatter}" 
        MinValue="{Binding InitialDateTime.Ticks}"> 
     </lvc:Axis> 
    </lvc:CartesianChart.AxisX> 
</lvc:CartesianChart>