Swift Charts：设置chartScrollableAxes后RuleMark的注解不可见问题

嘿，我之前也踩过这个坑！这大概率是Swift Charts在处理可滚动水平轴和注解布局时的一个小bug——当你开启水平滚动后，注解的布局计算逻辑会和滚动后的可视区域冲突，导致注解被裁剪或者跑到了可视范围外。不过别担心，咱们有几个实用的解决办法：

方法一：调整注解的overflowResolution参数 #

这是最简单的修复方式，只需要把注解的overflowResolution里的x轴适配目标从.chart改成.container就行。因为滚动时图表的可视区域是动态变化的，而.container是基于外部容器来计算布局，这样注解就不会被滚动区域裁剪了。

修改你代码里的注解部分：

.annotation(position: .top, overflowResolution: .init(x: .fit(to: .container), y: .disabled)) {
    Text(selectedDate.formatted())
        .padding()
        .background(Color(.secondarySystemFill))
        .clipShape(RoundedRectangle(cornerRadius: 10))
}

方法二：把注解移到Chart外部（手动定位） #

如果第一种方法不生效，你可以把注解从RuleMark里移出来，放在Chart的上层，通过selectedDate来手动控制它的显示和位置。这种方式可控性更强，和Health App的实现思路类似。

举个简化的例子，用ZStack来实现：

ZStack {
    Chart(stepCountRecords) { record in
        BarMark(
            x: .value("Date", record.date, unit: .day),
            y: .value("Count", record.steps)
        )
        if let selectedDate {
            RuleMark(x: .value("Selected", selectedDate, unit: .day))
                .foregroundStyle(Color(.secondarySystemFill).opacity(0.3))
        }
    }
    .chartScrollableAxes(.horizontal)
    .chartXSelection(value: $selectedDate)
    
    // 外部注解
    if let selectedDate {
        Text(selectedDate.formatted())
            .padding()
            .background(Color(.secondarySystemFill))
            .clipShape(RoundedRectangle(cornerRadius: 10))
            .alignmentGuide(HorizontalAlignment.center) { _ in
                // 后续可以结合ChartProxy做精准定位
                0
            }
    }
}

方法三：用ChartProxy精准定位注解 #

如果需要注解完全跟着选中的日期移动，那可以用ChartProxy来获取选中日期在图表中的精确坐标，然后动态调整注解的位置。这是最精准的方式，也更贴近Health App的实现：

首先添加一个状态变量存储注解位置：

@State private var annotationPosition: CGPoint?

然后修改你的Chart代码：

Chart(stepCountRecords) { record in
    BarMark(
        x: .value("Date", record.date, unit: .day),
        y: .value("Count", record.steps)
    )
    if let selectedDate {
        RuleMark(x: .value("Selected", selectedDate, unit: .day))
            .foregroundStyle(Color(.secondarySystemFill).opacity(0.3))
    }
}
.chartScrollableAxes(.horizontal)
.chartXSelection(value: $selectedDate)
// 通过ChartProxy获取选中日期的坐标
.chartProxy { proxy in
    DispatchQueue.main.async {
        if let selectedDate {
            if let xPos = proxy.position(forX: .value("Date", selectedDate, unit: .day)) {
                annotationPosition = CGPoint(x: xPos, y: 0)
            }
        } else {
            annotationPosition = nil
        }
    }
}
// 在overlay里放置注解并调整位置
.overlay(alignment: .topLeading) {
    if let annotationPosition, let selectedDate {
        Text(selectedDate.formatted())
            .padding()
            .background(Color(.secondarySystemFill))
            .clipShape(RoundedRectangle(cornerRadius: 10))
            // 偏移到选中日期的正上方，20是和顶部的间距，可按需调整
            .offset(x: annotationPosition.x - (UIScreen.main.bounds.width / 2), y: 20)
    }
}

建议你先试试第一种方法，大部分情况下都能解决问题。如果需要更精准的控制，再考虑后面两种方式。

备注：内容来源于stack exchange，提问作者Gene Bogdanovich