Swift Charts：指定 ChartScrollableAxes 时，RuleMark 注释不可见

Question

我正在开发一个项目，该项目会在图表上显示用户过去 15 天内所采取的步数。我已经实现了 iOS 17 中引入的图表选择行为，它显示一个带有所选值注释的

RuleMark

。但是，当我启用可滚动的 x 轴时，注释将变得不可见。请参阅随附的 GIF 图片。

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))
            .annotation(position: .top, overflowResolution: .init(x: .fit(to: .chart), y: .disabled)) {
                Text(selectedDate.formatted())
                    .padding()
                    .background(Color(.secondarySystemFill))
                    .clipShape(RoundedRectangle(cornerRadius: 10))
            }
    }
}
/*
 FIXME: Uncomment the following line to trigger the issue in question.
 .chartScrollableAxes(.horizontal)
 */
.chartXSelection(value: $selectedDate)

这是故意的吗？或者我做错了什么？值得注意的是，Apple 的 Health 应用同时支持滚动和注释。

这是一个小示例项目供您参考。

Answer 1

问题似乎是注释显示在条形的上方，它被一些允许滚动的滚动视图剪切。

您可以在 y 轴上启用

overflowResolution

，

.annotation(
    position: .top, 
    overflowResolution: .init(
        x: .fit(to: .chart), 
        y: .fit // <---
    )
) { ... }

注释现在将放置在图表顶部，覆盖条形。

如果您不希望注释隐藏条形的顶部，您可以添加一些顶部填充。

.chartPlotStyle {
    $0.padding(.top, 100)
}

---

将

chartXSelection

与可滚动图表一起使用将导致图表不可滚动，因为选择手势优先。考虑使用

SpatialTapGesture

更改选择，

.chartGesture { chartProxy in
    SpatialTapGesture().onEnded { value in
        selectedDate = chartProxy.value(atX: value.location.x, as: Date.self)
    }
}