WPF编程，Live Charts使用说明（48）——时间处理

要在LiveCharts中处理日期时间，您必须为图表创建自定义比例，这并不难，但是请在阅读本文之前确定是否有必要，是否只需要简单的标签（例如“一月，二月，三月”，以及所有它们之间有规律的间隔，然后仅使用 Axis.Labels就足够了

XAML

<lvc:CartesianChart Series="{Binding Series}">
  <lvc:CartesianChart.AxisX>
    <lvc:Axis LabelFormatter="{Binding Formatter}"></lvc:Axis>
  </lvc:CartesianChart.AxisX>
</lvc:CartesianChart>

.CS数据类

using System;
 
namespace Wpf.CartesianChart.Using_DateTime
{
    public class DateModel
    {
        public System.DateTime DateTime { get; set; }
        public double Value { get; set; }
    }
}

后台：

using System;
using System.Windows.Controls;
using System.Windows.Media;
using LiveCharts;
using LiveCharts.Configurations;
using LiveCharts.Wpf;
 
namespace Wpf.CartesianChart.Using_DateTime
{
    public partial class DateTime : UserControl
    {
        public DateTime()
        {
            InitializeComponent();
 
            var dayConfig = Mappers.Xy<DateModel>()
                .X(dayModel => (double) dayModel.DateTime.Ticks/TimeSpan.FromHours(1).Ticks)
                .Y(dayModel => dayModel.Value);
 
            //Notice you can also configure this type globally, so you don't need to configure every
            //SeriesCollection instance using the type.
            //more info at http://lvcharts.net/App/Index#/examples/v1/wpf/Types%20and%20Configuration
 
            Series = new SeriesCollection(dayConfig)
            {
                new LineSeries
                {
                    Values = new ChartValues<DateModel>
                    {
                        new DateModel
                        {
                            DateTime = System.DateTime.Now,
                            Value = 5
                        },
                        new DateModel
                        {
                            DateTime = System.DateTime.Now.AddHours(2),
                            Value = 9
                        }
                    },
                    Fill = Brushes.Transparent
                },
                new ColumnSeries
                {
                    Values = new ChartValues<DateModel>
                    {
                        new DateModel
                        {
                            DateTime = System.DateTime.Now,
                            Value = 4
                        },
                        new DateModel
                        {
                            DateTime = System.DateTime.Now.AddHours(1),
                            Value = 6
                        },
                        new DateModel
                        {
                            DateTime = System.DateTime.Now.AddHours(2),
                            Value = 8
                        }
                    }
                }
            };
 
            Formatter = value => new System.DateTime((long) (value*TimeSpan.FromHours(1).Ticks)).ToString("t");
            
            DataContext = this;
        }
 
        public Func<double, string> Formatter { get; set; }
        public SeriesCollection Series { get; set; }
    }
}

前台：

<UserControl x:Class="Wpf.CartesianChart.Using_DateTime.DateTime"
             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 Series}">
            <lvc:CartesianChart.AxisX>
                <lvc:Axis LabelFormatter="{Binding Formatter}"></lvc:Axis>
            </lvc:CartesianChart.AxisX>
        </lvc:CartesianChart>
    </Grid>
</UserControl>

现在，一切都很简单，此方法只是一个问题，当您需要任何条形图系列时，条形图的宽度为单一（1），请注意我们使用DateTime.Ticks作为X，因此条形图的宽度为1个刻度和1个滴答是1毫秒，请注意我们的点之间相隔2个小时，绘制的条形图系列宽度为1毫秒，间隔2小时不可见1毫秒，那么如何使条形图可见？

我们需要更改图表的单位，使用小时数

var dayConfig = Mappers.Xy<DateModel>()
  .X(dateModel => dateModel.DateTime.Ticks/TimeSpan.FromHours(1).Ticks)
  .Y(dateModel => dateModel.Value);
//and the formatter
Formatter = value => new DateTime((long) (value*TimeSpan.FromHours(1).Ticks)).ToString("t");

下一组示例显示了如何在许多时间间隔内配置图表的比例

//Every 15 minutes
var dayConfig = Mappers.Xy<DateModel>()
  .X(dateModel => dateModel.DateTime.Ticks/TimeSpan.FromMinutes(15).Ticks)
  .Y(dateModel => dateModel.Value);
//and the formatter
Formatter = value => new DateTime((long) (value*TimeSpan.FromMinutes(15).Ticks)).ToString("t");
 
//Days
var dayConfig = Mappers.Xy<DateModel>()
  .X(dateModel => dateModel.DateTime.Ticks/TimeSpan.FromDays(1).Ticks)
  .Y(dateModel => dateModel.Value);
//and the formatter
Formatter = value => new DateTime((long) (value*TimeSpan.FromDays(1).Ticks)).ToString("d");
 
//Months
//30.44 is the average days in a solar year
var dayConfig = Mappers.Xy<DateModel>()
  .X(dateModel => dateModel.DateTime.Ticks/(TimeSpan.FromDays(1).Ticks*30.44))
  .Y(dateModel => dateModel.Value);
//and the formatter
Formatter = value => new DateTime((long) (value*TimeSpan.FromDays(1).Ticks*30.44)).ToString("M");
 
//Years
//365.2425 is the days in a solar year
var dayConfig = Mappers.Xy<DateModel>()
  .X(dateModel => dateModel.DateTime.Ticks/(TimeSpan.FromDays(1).Ticks*365.2425))
  .Y(dateModel => dateModel.Value);
//and the formatter
Formatter = value => new DateTime((long) (value*TimeSpan.FromDays(1).Ticks*365.2425)).ToString("yyyy");

注意：由于并非所有的月份和年份都具有相同的天数，所以每个条形的宽度可能会在几个月内变化：+-（1 / 30.44），而在几年中变化：+ /-（1 / 365.2425），则外观很小且可折旧错误。