如何让SwiftUI Chart的数据点扩展至图表完整宽度？

要让SwiftUI Chart里的数据点从左侧起始位置延伸至右侧、铺满整个图表宽度，核心是调整X轴的定义域范围，让图表边界覆盖到最左和最右数据点的外侧，同时保持轴标签的居中对齐。以下是具体修改方案：

关键修改点 #

• 扩展X轴的domain范围：给现有数据的起始日期减半天，结束日期加半天，让图表左右边界延伸到数据点外侧
• 优化AreaMark实现：无需单独遍历每个数据点，直接基于整个数据集绘制区域，代码更简洁高效
• 保留X轴标签的居中对齐，同时让网格线、数据点贴合图表边缘

修改后的完整代码 #

var body: some View {
    VStack(alignment: .leading) {
        Chart(weight) { data in
            LineMark(
                x: .value("Day", data.date, unit: .day),
                y: .value("Weight", data.weight)
            )
            .symbol {
                Circle()
                    .fill(.pink)
                    .frame(width: 8)
            }

            RuleMark(y: .value("Goal Weight", 63))
                .foregroundStyle(Color.secondary)
                .lineStyle(StrokeStyle(lineWidth: 0.8, dash: [10]))
                .annotation(alignment: .topTrailing) {
                    Text("Your Goal:  63 kg")
                        .font(.subheadline).bold()
                        .padding(.trailing, 32)
                        .foregroundStyle(Color.secondary)
                }
            
            // 优化：单个AreaMark自动遍历数据集，无需ForEach
            AreaMark(
                x: .value("Day", $0.date, unit: .day),
                yStart: .value("WeightLow", 63),
                yEnd: .value("Weight", $0.weight)
            )
            .foregroundStyle(gradientColor)
        }
        .frame(height: 400)
        .foregroundStyle(.pink)
        .chartXScale {
            // 扩展X轴范围，让图表边界覆盖到数据点外侧
            let minDate = weight.map { $0.date }.min()?.addingTimeInterval(-86400/2) ?? Date()
            let maxDate = weight.map { $0.date }.max()?.addingTimeInterval(86400/2) ?? Date()
            Scale.domain(minDate...maxDate)
        }
        .chartXAxis {
            AxisMarks(values: .stride(by: .day)) { _ in
                AxisGridLine()
                AxisValueLabel(format: .dateTime.weekday(.abbreviated), centered: true)
                AxisTick()
            }
        }
        .chartYScale(domain: 62...70)
    }
    .padding()
}

效果说明 #

通过chartXScale手动扩展X轴的定义域后，图表的左右边界会延伸到数据点的外侧，折线和区域会自然铺满整个图表宽度；同时保留AxisValueLabel的centered: true设置，确保日期标签依然居中对应到数据点位置。

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