SwiftUI Chart宽度适配屏幕问题求助（含LineMark等组件）

问题根源 #

你用字符串类型作为X轴的Day值，SwiftUI Charts会将这类离散分类数据默认按均匀间距排列，不会自动拉伸填充整个可用宽度；另外直接使用UIScreen.main.bounds.width硬编码宽度也不是适配的最佳方式。

解决方案 #

1. 将X轴数据改为数值类型（推荐） #

把ChartData的day字段从String改为Int——你的数据是连续的日期序号（Day1到Day10），这样图表会将X轴识别为连续数值轴，自动拉伸填充宽度：

// 修改ChartData结构
struct ChartData: Identifiable {
    let id = UUID()
    let day: Int // 改为Int类型
    let value: Double
}

var chartData: [ChartData] = [
    ChartData(day: 1, value: 40),
    ChartData(day: 10, value: 50)
]

func chartView() -> some View {
    Chart(chartData) { data in
        LineMark(x: .value("Day", data.day),
                 y: .value("Value", data.value))
            .interpolationMethod(.catmullRom)
    
        PointMark(x: .value("Day", data.day),
                  y: .value("Value", data.value))
            .annotation(position: .top,
                        alignment: .bottom,
                        spacing: 10) {
                Text("\(data.value)")
                    .font(.body)
                    .foregroundColor(.white)
                    .padding(.horizontal, 12)
                    .padding(.vertical, 4)
                    .background(.accentColor)
                    .cornerRadius(8)
            }
        AreaMark(x: .value("Day", data.day),
                 y: .value("Value", data.value))
            .foregroundStyle(chartGradient)
            .opacity(0.3)
    }
    .frame(maxWidth: .infinity, height: 150) // 自适应父容器宽度
    .chartXAxis(.hidden)
    .chartYAxis(.hidden)
    .chartXScale(domain: 1...10) // 可选：强制指定X轴范围，确保两端对齐
}

2. 若需保留字符串X轴 #

如果必须使用字符串作为X轴标签，可以通过chartXScale指定范围，同时强制绘图区域填充宽度：

func chartView() -> some View {
    Chart(chartData) { data in
        // 原LineMark、PointMark、AreaMark代码不变
    }
    .frame(maxWidth: .infinity, height: 150)
    .chartXAxis(.hidden)
    .chartYAxis(.hidden)
    .chartXScale(domain: ["Day 1", "Day 10"]) // 指定离散X轴范围
    .chartPlotStyle { plotArea in
        plotArea.frame(maxWidth: .infinity) // 强制绘图区域填充可用空间
    }
}

核心修改点 #

• 替换硬编码的UIScreen.main.bounds.width为maxWidth: .infinity，让图表自动适配父视图宽度
• 将离散字符串X轴改为连续数值轴（更符合数据逻辑），或通过chartXScale强制指定离散范围
• 可选使用chartPlotStyle确保绘图区域完全填充可用空间

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