Swift Charts折线图点击按钮后底部出现异常曲线求助

问题现象 #

用Swift Charts实现了两个折线图（分别展示入睡时长、卧床总时长），初始状态显示正常，但触发以下操作时出现异常：

• 点击NavigationLink或工具栏项目后，图表底部出现随机曲线
• 使用chartXSelection展示标注视图时，拖动图表曲线暂时消失，但停留在同一数值几秒后重新出现

问题根源分析 #

从代码逻辑来看，异常主要由以下几点导致：

1. AreaMark基准值不稳定：AreaMark的yEnd依赖单独的minValue，若该值在页面跳转后未正确更新，或数据集合出现异常值，catmullRom插值方法会绘制出异常曲线
2. 选中状态的动画干扰：chartXSelection绑定的rawSelectedDate添加了动画修饰符，可能导致图表重绘时状态不一致
3. Y轴范围动态变化：chartYScale使用自动范围且不包含0，页面跳转后数据刷新可能触发Y轴范围异常，进而导致曲线布局错乱

具体修复方案 #

1. 稳定AreaMark的底部基准 #

将AreaMark的yEnd从单独的minValue改为从chartData中实时提取最小值，避免基准值失效：

AreaMark(
    x: .value("Day", sleep.date, unit: .day),
    yStart: .value("Value", sleep.value),
    // 从当前数据集合中取最小value作为底部基准
    yEnd: .value("Min Value", chartData.map(\.value).min() ?? 0)
)
.foregroundStyle(Gradient(colors: [.cyan.opacity(0.5), .clear]))
.interpolationMethod(.catmullRom)

2. 移除选中状态的动画干扰 #

去掉chartXSelection的动画修饰符，避免状态更新时的异常重绘：

// 原代码：.chartXSelection(value: $rawSelectedDate.animation(.easeInOut))
.chartXSelection(value: $rawSelectedDate)

3. 固定Y轴范围（可选） #

如果业务允许，提前计算Y轴的最小/最大值并固定范围，避免动态变化导致的异常：

// 先计算数据的有效范围（可添加缓冲值优化显示）
private var yAxisRange: ClosedRange<Double> {
    let values = chartData.map(\.value)
    let min = values.min() ?? 0
    let max = values.max() ?? 0
    return (min - 3600)...(max + 3600)
}

// 应用到图表
.chartYScale(domain: yAxisRange)

4. 页面出现时重新校验数据 #

在视图出现时重新加载或校验数据，确保页面跳转返回后数据完整且最新：

.onAppear {
    // 调用你的数据加载方法，例如：
    fetchSleepData()
}

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