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代码

cs 复制代码
 public class DataPoint
    {
        public DateTime Date { get; set; }
        public double Value { get; set; }
    }

四、ViewModel代码

4.1 设置数据映射

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

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

4.2 设置数据映射转换格式

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

cs 复制代码
Formatter = value => new DateTime((long)(value * TimeSpan.FromHours(1).Ticks)).ToString("t");

4.3 后端代码

cs 复制代码
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");
        }
相关推荐
亦陈不染1 小时前
c#入门详解(刘铁锰)06 - 数据持久化:TXT文本保存、序列化与反序列化(附详细源码)
开发语言·计算机视觉·c#·wpf
应用市场4 小时前
楼灯光矩阵显示系统:从理论到实践的完整技术方案
线性代数·矩阵·wpf
虚行8 小时前
WPF入门
开发语言·c#·wpf
周杰伦fans9 小时前
MahApps.Metro WPF 开发使用过程中遇到的问题 - 未能加载文件或程序集“Microsoft.Xaml.Behaviors,
microsoft·wpf
△曉風殘月〆20 小时前
WPF中的坐标转换
wpf
一个天蝎座 白勺 程序猿1 天前
深度解析:通过ADO.NET驱动Kdbndp高效连接与操作Kingbase数据库
数据库·.net·wpf·kingbase·金仓数据库
时光追逐者1 天前
一个使用 WPF 开发的 Diagram 画板工具(包含流程图FlowChart,思维导图MindEditor)
c#·.net·wpf·流程图
Vae_Mars1 天前
WPF中的DataTemplate
wpf
Aevget1 天前
界面控件DevExpress WPF v25.2新功能预览 - 聚焦AI功能提升
人工智能·wpf·界面控件·devexpress·ui开发·.net 10
csdn_aspnet1 天前
如何从 WPF 控件 DataGrid 中删除多余的列
wpf·datagrid