Swift Charts：如何在底部边框外侧显示红色刻度线？

问题描述 #

当前开发的SwiftUI图表中，底部的红色刻度线显示在Chart的黑色边框内侧，需要调整为显示在边框外侧。

解决方案 #

要实现这个效果，需要调整三个核心点：

• 将Chart的边框移至外层容器，避免刻度线被Chart自身的边框截断
• 给AxisTick指定position: .bottom，让刻度线向X轴外侧（下方）延伸
• 给Chart添加底部内边距，预留刻度线的显示空间

修改后的完整代码 #

VStack(alignment: .leading) {
    // 外层容器承载边框，内部放置Chart
    VStack {
        Chart {
            ForEach(chartData, id: \.id) { item in
                LineMark(
                    x: .value("Beat", item.beat),
                    y: .value("Value", item.value)
                )
                .foregroundStyle(item.type.color.opacity(lineVisibility[item.type]!))
                .foregroundStyle(by: .value("Plot", item.type))
                .lineStyle(.init(lineWidth: 2))
            }
        }
        .chartLegend(.hidden)
        .chartYAxis(.hidden)
        .chartXAxis {
            AxisMarks(values: .automatic(desiredCount: numberOfBeats, roundLowerBound: true, roundUpperBound: true)) { _ in
                AxisGridLine(stroke: .init(lineWidth: 1)).foregroundStyle(Color.gray)
                // 设置position为.bottom，让刻度线向轴外侧延伸
                AxisTick(centered: true, length: 20, stroke: .init(lineWidth: 1), position: .bottom)
                    .foregroundStyle(Color.red)
            }
        }
        .padding(.bottom, 20) // 预留刻度线显示空间
        .padding(.trailing, 15)
    }
    .border(.black, width: 2) // 边框移至外层容器
    
    HStack {
        Text("0 beat")
            .padding(.leading, -15)
        Spacer()
        Text("\(numberOfBeats) beat")
    }
}
.frame(minWidth: GENERAL_WIDTH * 2)
.padding(.trailing, 10)

关键调整说明 #

1. 外层容器加边框：原来的.border修饰符直接加在Chart上，导致Chart的可视范围被边框限制，刻度线无法延伸到外侧。将边框移到包裹Chart的VStack上，Chart就能拥有额外的底部空间来绘制刻度线。
2. AxisTick的position参数：默认情况下AxisTick会向图表内容方向（内侧）绘制，设置position: .bottom后，刻度线会向X轴的外侧（下方）延伸。
3. 底部内边距：.padding(.bottom, 20)确保Chart底部有足够空间容纳刻度线，避免被外层容器的边框遮挡。

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