Swift Charts：绘制线条颜色由Y值决定的折线图

嘿，我明白你遇到的问题了——想用Swift Charts画出根据Y值区间变色的折线，之前的两种尝试都没达到预期对吧？别担心，我来给你说说怎么解决这个问题。

为什么之前的尝试没成功？ #

先聊聊你之前的两种方法为啥行不通：

• 第一种给每个LineMark单独设foregroundStyle，其实是把每个点之间的小段线单独染色，但Swift Charts不会把这些零散的小段合并成一条连贯的折线，反而可能呈现出断开的效果，自然达不到你要的样子。
• 第二种用foregroundStyle(by:)的方式，确实会按颜色分组，但它会把不同颜色的部分当成完全独立的数据系列，导致折线直接断开，不是同一条线分段变色的效果。

正确的解决方案 #

核心思路是：把原始数据拆分成连续的同颜色线段组，然后为每个线段组单独绘制LineMark，这样既能保证颜色对应Y值区间，又能让折线整体连贯。

第一步：拆分数据为同颜色连续段

先写一个工具函数，把你的plotItemSeries数组拆分成多个子数组，每个子数组里的元素都是连续且颜色相同的：

func splitIntoColorSegments(_ data: [PlotItem]) -> [[PlotItem]] {
    guard !data.isEmpty else { return [] }
    var segments = [[PlotItem]]()
    var currentSegment = [data[0]]
    var currentColor = data[0].zoneColor
    
    for item in data.dropFirst() {
        if item.zoneColor == currentColor {
            currentSegment.append(item)
        } else {
            segments.append(currentSegment)
            currentSegment = [item]
            currentColor = item.zoneColor
        }
    }
    segments.append(currentSegment)
    return segments
}

第二步：基于分段数据绘制折线

调用上面的函数拆分数据，然后在Chart中遍历每个线段组绘制折线，每个组用对应的颜色：

// 先拆分数据
let colorSegments = splitIntoColorSegments(plotItemSeries)

Chart {
    ForEach(colorSegments, id: \.self) { segment in
        LineMark(
            x: .value("XVAL", segment.map(\.xVal)),
            y: .value("YVAL", segment.map(\.yVal))
        )
        // 用当前线段组的颜色
        .foregroundStyle(segment.first?.zoneColor ?? .clear)
    }
}

原理说明 #

这个方法的关键是确保每个线段组都是连续的同颜色数据点，绘制出来的LineMark会是一段完整的折线，而多个线段组因为X值是连续的，衔接起来就会呈现出一条整体连贯但分段变色的折线，完全符合你的需求。

如果你的X轴是连续数值（比如时间、数值型），这个方法可以完美适配；如果是类别型X轴，只要数据是按顺序排列的，同样能正常工作。

备注：内容来源于stack exchange，提问作者Douglas Ross