WPF使用LiveCharts画图时，横坐标转换成时间

一、背景

    使用LiveCharts画图时，横坐标通常为数值类型，要转换成时间等自定义类型，需要用到Formatter进行类型转换。

    示例使用MVVM模式编写

二、View代码

     关键是设置LabelFormatter属性

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

 三、Model代码

 public class DataPoint{public DateTime Date { get; set; }public double Value { get; set; }}

四、ViewModel代码

    4.1 设置数据映射

       用Mappers将DateTime转换数值类型，这里使用了DateTime的Ticks进行转换

var dayConfig = Mappers.Xy<DataPoint>().X(dayModel => (double)dayModel.Date.Ticks / TimeSpan.FromHours(1).Ticks).Y(dayModel => dayModel.Value);

4.2 设置数据映射转换格式

    将转换后的数值类型还原成Datetime，再加上自定义的字符

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

4.3 后端代码

public ScatterChartViewModel(){// 初始化数据var dataPoints = new List<DataPoint>{new DataPoint { Date = new DateTime(2024, 3, 1), Value = 10 },new DataPoint { Date = new DateTime(2024, 3, 2), Value = 20 },new DataPoint { Date = new DateTime(2024, 3, 3), Value = 15 },// 添加更多数据点};var dayConfig = Mappers.Xy<DataPoint>().X(dayModel => (double)dayModel.Date.Ticks / TimeSpan.FromHours(1).Ticks).Y(dayModel => dayModel.Value);Series = new SeriesCollection(dayConfig){new ScatterSeries{Title = "Data Points",Values = new ChartValues<DataPoint>(dataPoints)}};Formatter = value => new DateTime((long)(value * TimeSpan.FromHours(1).Ticks)).ToString("t");}