一、背景

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

    示例使用MVVM模式编写

二、View代码

     关键是设置LabelFormatter属性

 三、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()
                 .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
        {
            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()
                 .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(dataPoints)
                }
            };
            Formatter = value => new DateTime((long)(value * TimeSpan.FromHours(1).Ticks)).ToString("t");
        }