SwiftUI Chart如何实现单条折线两种样式？

要实现这种分段样式的折线，你不能直接给单个LineMark设置动态变化的strokeStyle——因为单个LineMark的样式是全局统一的，没法根据数据点切换。正确的做法是把数据源拆分成两组（比如“过去数据”和“未来数据”），分别用两个LineMark绘制，给它们设置不同的线条样式，同时确保两组数据在衔接点上有重叠，避免折线断开。

举个完整的实现例子：

首先定义数据模型：

struct ChartData: Identifiable {
    let id = UUID()
    let value: Double
    let isFuture: Bool // 标记是否为未来数据
}

然后准备数据源并拆分：

let sampleData: [ChartData] = [
    .init(value: 10, isFuture: false),
    .init(value: 15, isFuture: false),
    .init(value: 12, isFuture: false),
    .init(value: 18, isFuture: true), // 衔接点，同时属于两组数据
    .init(value: 22, isFuture: true),
    .init(value: 20, isFuture: true)
]

// 拆分数据：过去数据包含衔接点
let pastData = sampleData.filter { !$0.isFuture || ($0.isFuture && sampleData.firstIndex(where: { $0.isFuture }) == sampleData.firstIndex(of: $0)) }
// 未来数据从衔接点开始
let futureData = sampleData.filter { $0.isFuture }

最后在Chart中绘制：

Chart {
    // 绘制过去的实线
    LineMark(
        x: .value("索引", pastData.map { sampleData.firstIndex(of: $0)! }),
        y: .value("数值", pastData.map { $0.value })
    )
    .stroke(.blue, style: StrokeStyle(lineWidth: 2))
    
    // 绘制未来的虚线
    LineMark(
        x: .value("索引", futureData.map { sampleData.firstIndex(of: $0)! }),
        y: .value("数值", futureData.map { $0.value })
    )
    .stroke(.blue, style: StrokeStyle(lineWidth: 2, dash: [5]))
}

这样就能得到一段实线接一段虚线的折线效果，和你示例图里的样式一致。注意衔接点必须同时出现在两组数据中，否则两段折线会出现断点。

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