Swift Charts多AreaMark存在间隙，如何实现连续填充？

一、消除AreaMark之间的间隙 #

间隙出现的核心原因是相邻颜色区域的x范围没有无缝衔接。比如蓝色区域到x=5、红色区域从x=6开始，中间就会产生空隙。正确做法是让后一个区域的起始x等于前一个区域的结束x，用区间定义替代单点数据：

1. 调整数据模型，用区间数据存储每个颜色块的范围：

struct ChartSegment: Identifiable {
    let id = UUID()
    let xStart: Double
    let xEnd: Double
    let yValue: Double
    let baseColor: Color
}

// 示例数据：每个区间无缝衔接
let chartSegments = [
    ChartSegment(xStart: 0, xEnd: 5, yValue: 12, baseColor: .blue),
    ChartSegment(xStart: 5, xEnd: 10, yValue: 18, baseColor: .red),
    ChartSegment(xStart: 10, xEnd: 15, yValue: 9, baseColor: .green)
]

2. 绘制AreaMark时使用xStart和xEnd定义区间：

Chart(chartSegments) { segment in
    AreaMark(
        xStart: .value("Start", segment.xStart),
        xEnd: .value("End", segment.xEnd),
        y: .value("Value", segment.yValue)
    )
    .foregroundStyle(segment.baseColor)
}

这种方式会让颜色区域完全连续，不会出现间隙。

二、拖拽选择区域并修改样式 #

通过手势捕获拖拽的起始/结束x值，动态调整选中区域的样式：

1. 添加状态变量存储选中区间：

@State private var selectedRange: ClosedRange<Double>?
@State private var dragStartX: Double?

2. 给图表绑定拖拽手势，并动态渲染选中区域：

Chart(chartSegments) { segment in
    // 基础区域绘制
    AreaMark(
        xStart: .value("Start", segment.xStart),
        xEnd: .value("End", segment.xEnd),
        y: .value("Value", segment.yValue)
    )
    .foregroundStyle(getDisplayColor(for: segment))
    
    // 选中区域覆盖层（如果有选中区间）
    if let range = selectedRange {
        AreaMark(
            xStart: .value("Sel Start", range.lowerBound),
            xEnd: .value("Sel End", range.upperBound),
            y: .value("Value", segment.yValue)
        )
        .foregroundStyle(.orange.opacity(0.4))
    }
}
.gesture(
    DragGesture()
        .onChanged { gesture in
            // 将拖拽坐标转换为x轴数值
            let proxy = ChartProxy(chart: /* 传入你的Chart实例 */)
            let currentX = proxy.value(atX: gesture.location.x) as? Double ?? 0
            
            if dragStartX == nil {
                dragStartX = currentX
            } else {
                let lower = min(dragStartX!, currentX)
                let upper = max(dragStartX!, currentX)
                selectedRange = lower...upper
            }
        }
        .onEnded { _ in
            // 可选：结束拖拽后保留状态或重置
        }
)

3. 辅助方法判断区域是否与选中区间重叠，返回对应颜色：

private func getDisplayColor(for segment: ChartSegment) -> Color {
    guard let range = selectedRange else { return segment.baseColor }
    // 判断当前区域与选中区间是否重叠
    let isOverlapping = segment.xStart < range.upperBound && segment.xEnd > range.lowerBound
    return isOverlapping ? segment.baseColor.opacity(0.6) : segment.baseColor
}

三、解决添加重复x数据导致的图表错乱 #

不要直接添加重复x值的数据点，这会让Swift Charts无法正确解析数据连续性。改用区间定义的方式（如第一部分所示），通过xStart和xEnd明确每个颜色块的范围，既能实现无缝衔接，又不会出现数据重叠导致的渲染错乱。

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