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");
        }
相关推荐
玉面小君2 天前
从 WPF 到 Avalonia 的迁移系列实战篇6:Trigger、MultiTrigger、DataTrigger 的迁移
wpf·avalonia
招风的黑耳3 天前
Java生态圈核心组件深度解析:Spring技术栈与分布式系统实战
java·spring·wpf
lfw20193 天前
WPF 数据绑定模式详解(TwoWay、OneWay、OneTime、OneWayToSource、Default)
wpf
Magnum Lehar3 天前
3d wpf游戏引擎的导入文件功能c++的.h实现
3d·游戏引擎·wpf
FuckPatience3 天前
WPF Telerik.Windows.Controls.Data.PropertyGrid 自定义属性编辑器
wpf
almighty274 天前
C#WPF控制USB摄像头参数:曝光、白平衡等高级设置完全指南
开发语言·c#·wpf·usb相机·参数设置
军训猫猫头4 天前
12.NModbus4在C#上的部署与使用 C#例子 WPF例子
开发语言·c#·wpf
我要打打代码4 天前
在WPF项目中使用阿里图标库iconfont
wpf
拾忆,想起5 天前
Redisson 分布式锁的实现原理
java·开发语言·分布式·后端·性能优化·wpf
weixin_464078075 天前
wpf依赖注入驱动的 MVVM实现(含免费源代码demo)
wpf