LiveCharts2 中实现自定义 StepLineSeries 绘制顺序的技巧

背景介绍

在数据可视化领域，StepLine（阶梯线）图表是一种常见的展示方式，它通过水平和垂直线段的组合来呈现数据的变化。LiveCharts2 作为一款功能强大的.NET数据可视化库，提供了StepLineSeries组件用于绘制阶梯线图表。

问题分析

标准的StepLineSeries在绘制两点之间的连接时，默认采用先绘制水平线段（X轴方向）再绘制垂直线段（Y轴方向）的方式。然而在某些业务场景下，用户可能需要反转这种绘制顺序，即先绘制垂直线段再绘制水平线段。

解决方案

在LiveCharts2的rc5.1版本中，通过新的Drawing API可以轻松实现这种自定义绘制顺序的需求。以下是具体实现方法：

1. 创建自定义几何图形类

首先需要创建一个继承自StepLineAreaGeometry的自定义几何图形类，重写其OnDrawSegment方法：

public class CustomStepLineAreaGeometry : StepLineAreaGeometry
{
    private bool _isFirst = true;

    protected override void OnDrawSegment(SkiaSharpDrawingContext context, SKPath path, Segment segment)
    {
        if (_isFirst)
        {
            _isFirst = false;
            return;
        }

        path.LineTo(segment.Xi, segment.Yj);
        path.LineTo(segment.Xj, segment.Yj);
    }
}

2. 创建自定义系列类

接着创建一个继承自CoreStepLineSeries的自定义系列类，指定使用我们刚刚创建的几何图形类型：

public class CustomStepAreaSeries<TModel>
    : CoreStepLineSeries<TModel, CircleGeometry, LabelGeometry, CustomStepLineAreaGeometry, LineGeometry>
{
    public CustomStepAreaSeries(IReadOnlyCollection<TModel>? values = null)
        : base(values)
    { }
}

3. 使用自定义系列

最后，在视图模型中使用这个自定义系列：

public class ViewModel
{
    public ISeries[] Series { get; set; } = [
        new CustomStepAreaSeries<double?>
        {
            Values = [2, 1, 3, 4, 3, 4, 6],
            Fill = null
        }
    ];
}

实现原理

这种实现方式利用了LiveCharts2的绘图API提供的灵活性：

1. StepLineAreaGeometry是负责绘制阶梯线区域的基础类
2. 通过重写OnDrawSegment方法，我们可以完全控制每个线段的绘制顺序和方式
3. _isFirst标志用于跳过第一个点的绘制，因为第一个点没有前驱点可以连接
4. 在后续的点中，我们使用path.LineTo方法先绘制垂直线段(Y方向)，再绘制水平线段(X方向)

应用场景

这种自定义绘制顺序的阶梯线图表特别适用于以下场景：

1. 需要强调数据变化时刻而非变化持续时间的场景
2. 当X轴表示时间，Y轴表示状态时，更符合状态先变化、后持续的业务逻辑
3. 需要与特定行业标准或用户习惯保持一致的场景

总结

LiveCharts2提供了强大的扩展能力，通过自定义几何图形类可以灵活控制图表元素的绘制方式。这种实现方式不仅解决了阶梯线绘制顺序的问题，也为其他类型的自定义图表绘制提供了参考思路。开发者可以根据实际需求，进一步扩展和定制图表的绘制行为。