SwiftUI Chart图表至80基准线的填充区域显示异常，求指导

核心问题原因 #

你当前的代码将AreaMark放在了ForEach循环内部，这会导致每个数据点都生成一个独立的填充片段，多个片段叠加后就会出现填充区域显示混乱的问题。AreaMark需要基于完整的数据集绘制连续的填充区域，而非单个数据点。

修复后的代码 #

Chart {
    // 绘制折线（保留原逻辑，可优化为直接绑定数组）
    ForEach(Array(vm.weightMeasurs.enumerated()), id: \.offset) { index, measure in
        LineMark(
            x: .value("Index", index),
            y: .value("Value", measure)
        )
        .foregroundStyle(Colors.foodCircle)
        .interpolationMethod(.catmullRom)
    }
    
    // 绘制最后一个点（优化：使用数组长度-1作为x索引，而非固定3）
    if let lastMeasure = vm.weightMeasurs.last {
        PointMark(
            x: .value("Index", vm.weightMeasurs.count - 1),
            y: .value("Value", lastMeasure)
        )
    }
    
    // 单独绘制区域填充：基于完整数据集生成连续填充
    AreaMark(
        x: .value("Index", Array(vm.weightMeasurs.enumerated()).map { $0.offset }),
        yStart: .value("Value", vm.weightMeasurs),
        yEnd: .value("Value", 80)
    )
    .foregroundStyle(curGradient)
    .interpolationMethod(.catmullRom)
    
    // 基准线
    RuleMark(y: .value("Limit", 80))
        .foregroundStyle(.gray)
}
.chartYScale(domain: vm.yMin...vm.yMax)
.padding()

关键修改说明 #

• 移出AreaMark到循环外：直接通过完整的数据集（索引数组+数值数组）绘制连续的填充区域，避免多个小填充块叠加。
• 优化PointMark的x值：原代码固定x为3，改为用数组最后一个元素的索引，确保点始终对应折线的终点。
• 保持插值方法一致：AreaMark和LineMark使用相同的.catmullRom插值，保证填充区域与折线的曲线形态匹配。

额外优化建议 #

如果不需要单独处理每个折线点的逻辑，LineMark也可以简化为直接绑定数组，无需enumerated()：

LineMark(
    x: .value("Index", vm.weightMeasurs.indices),
    y: .value("Value", vm.weightMeasurs)
)
.foregroundStyle(Colors.foodCircle)
.interpolationMethod(.catmullRom)

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