SwiftUI Chart X轴网格线终止与标签居中样式调整咨询

问题描述 #

这是当前SwiftUI Chart的X轴效果：

当前存在两个需要调整的点：

• 垂直网格线穿过了X轴
• X轴标签（1、735等）显示在网格线右侧，未居中

我希望实现：垂直网格线在X轴处终止，且X轴标签居中显示在X轴下方。当前使用的修饰器代码如下：

.chartXAxisLabel(position: .bottom, alignment: .center) {
    Text("x axis title")
}
.chartXScale(domain: [minX, maxX])

实现方案 #

1. 让网格线在X轴终止 #

通过自定义chartGrid，设置垂直网格线仅在绘图区域显示，不穿过X轴：

.chartGrid {
    ChartGridVerticalAxis(
        stroke: StrokeStyle(lineWidth: 1),
        range: .plotOnly // 限制网格线仅在图表绘图区域内显示
    )
}

2. 让X轴标签居中 #

自定义X轴刻度样式，通过AxisMarks控制标签的对齐方式，确保标签居中：

.chartXAxis {
    AxisMarks(position: .bottom, values: .automatic) { value in
        AxisGridLine() // 保留网格线（配合上述range设置）
        AxisTick() // 可选，显示X轴刻度短线
        AxisLabel {
            // 根据X轴值的实际类型调整转换逻辑，这里以Int为例
            if let intValue = value.as(Int.self) {
                Text("\(intValue)")
                    .frame(maxWidth: .infinity, alignment: .center)
            }
        }
    }
}

完整整合示例 #

将上述配置整合到你的Chart中，示例代码如下：

// 假设data是你的图表数据源
Chart(data) { item in
    LineMark(
        x: .value("X值", item.x),
        y: .value("Y值", item.y)
    )
}
.chartXAxisLabel(position: .bottom, alignment: .center) {
    Text("x axis title")
}
.chartXScale(domain: [minX, maxX])
.chartGrid {
    ChartGridVerticalAxis(range: .plotOnly)
}
.chartXAxis {
    AxisMarks(position: .bottom) { value in
        AxisGridLine()
        AxisTick()
        AxisLabel {
            if let val = value.as(Int.self) {
                Text("\(val)")
                    .frame(maxWidth: .infinity, alignment: .center)
            }
        }
    }
}

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