LiveCharts单X轴承载多曲线非同步时间点数据可行性问询

当然可以实现，LiveCharts原生支持这种单X轴承载所有非重合时间点、每条曲线独立绑定自身数据的场景，无需补全缺失数据或使用多X轴。以下是结合WPF MVVM架构的具体实现步骤：

1. 定义数据点模型 #

创建符合MVVM规范的测量数据模型，包含时间（X轴）和数值（Y轴）属性：

public class MeasurementPoint : INotifyPropertyChanged
{
    private DateTime _x;
    private double _y;

    public DateTime X
    {
        get => _x;
        set { _x = value; OnPropertyChanged(); }
    }

    public double Y
    {
        get => _y;
        set { _y = value; OnPropertyChanged(); }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. ViewModel层准备数据源 #

在ViewModel中定义多个可观察集合，分别对应每条曲线的采集数据（实际场景中替换为设备返回的真实数据）：

public class MainViewModel : INotifyPropertyChanged
{
    public ObservableCollection<MeasurementPoint> Curve1Data { get; set; }
    public ObservableCollection<MeasurementPoint> Curve2Data { get; set; }
    public ObservableCollection<MeasurementPoint> Curve3Data { get; set; }

    // X轴时间格式化器
    public Func<double, string> TimeFormatter => 
        value => new DateTime((long)value).ToString("yyyy-MM-dd HH:mm");

    // 计算所有曲线的时间范围，确保X轴完整覆盖
    public double MinTimeTicks
    {
        get
        {
            var allPoints = Curve1Data.Concat(Curve2Data)
                .Concat(Curve3Data ?? Enumerable.Empty<MeasurementPoint>());
            return allPoints.Any() ? allPoints.Min(p => p.X.Ticks) : 0;
        }
    }

    public double MaxTimeTicks
    {
        get
        {
            var allPoints = Curve1Data.Concat(Curve2Data)
                .Concat(Curve3Data ?? Enumerable.Empty<MeasurementPoint>());
            return allPoints.Any() ? allPoints.Max(p => p.X.Ticks) : 0;
        }
    }

    public MainViewModel()
    {
        // 模拟设备返回的非重合时间点数据
        Curve1Data = new ObservableCollection<MeasurementPoint>();
        Curve2Data = new ObservableCollection<MeasurementPoint>();
        var random = new Random();

        for (int i = 0; i < 64; i++)
        {
            Curve1Data.Add(new MeasurementPoint
            {
                X = DateTime.Now.AddMinutes(i * 5),
                Y = random.NextDouble() * 100
            });
            // 确保时间点不重合
            Curve2Data.Add(new MeasurementPoint
            {
                X = DateTime.Now.AddMinutes(i * 5 + 3),
                Y = random.NextDouble() * 100
            });
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

3. View层XAML配置LiveCharts #

在WPF窗口中配置CartesianChart，使用DateTimeAxis作为单X轴，直接绑定每条曲线的数据源：

<Window x:Class="LiveChartsDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
        xmlns:local="clr-namespace:LiveChartsDemo"
        Title="测量数据展示" Height="450" Width="800">
    <Window.DataContext>
        <local:MainViewModel />
    </Window.DataContext>
    <Grid>
        <lvc:CartesianChart>
            <!-- 单X轴配置：自动适配所有曲线的时间点 -->
            <lvc:CartesianChart.AxisX>
                <lvc:DateTimeAxis Title="时间"
                                  LabelFormatter="{Binding TimeFormatter}"
                                  MinValue="{Binding MinTimeTicks}"
                                  MaxValue="{Binding MaxTimeTicks}"/>
            </lvc:CartesianChart.AxisX>
            <!-- Y轴配置 -->
            <lvc:CartesianChart.AxisY>
                <lvc:Axis Title="测量值"/>
            </lvc:CartesianChart.AxisY>
            <!-- 多条曲线绑定 -->
            <lvc:CartesianChart.Series>
                <lvc:LineSeries Title="曲线1" 
                                Values="{Binding Curve1Data}"
                                PointGeometrySize="6"/>
                <lvc:LineSeries Title="曲线2" 
                                Values="{Binding Curve2Data}"
                                PointGeometrySize="6"/>
                <!-- 可选第三条曲线 -->
                <!--<lvc:LineSeries Title="曲线3" 
                                Values="{Binding Curve3Data}"
                                PointGeometrySize="6"/>-->
            </lvc:CartesianChart.Series>
        </lvc:CartesianChart>
    </Grid>
</Window>

核心逻辑说明 #

LiveCharts的LineSeries支持直接绑定包含X和Y属性的集合，每条曲线会自动根据自身X值（DateTime的Ticks）在单X轴上定位数据点。所有曲线的时间点会被自动纳入X轴的显示范围，完美实现你需要的Excel示例效果——单X轴承载所有非重合时间点，每条曲线仅显示自身数据点。

内容的提问来源于stack exchange，提问作者Chris37