如何在SwiftUI Chart中一次性精确显示7个柱状条？

核心调整方案： #

• 移除水平滚动属性：你代码里的.chartScrollableAxes(.horizontal)是导致图表可滚动的直接原因，删除这个修饰符后，图表会自动尝试适配父视图宽度。
• 固定X轴数据范围：明确指定X轴仅包含需要的7天数据区间，避免图表自动扩展范围导致柱状条被挤压或拉伸。
• 调整柱状条宽度（可选）：如果柱状条过宽或过窄，通过barWidth控制显示尺寸，确保7个柱子能完整排列且间距合理。

修改后的代码示例： #

// 先确定7天数据的时间范围（示例以当前日期往前推6天，包含当天共7天）
let startDate = Calendar.current.date(byAdding: .day, value: -6, to: Date())!
let endDate = Date()

Chart(somethings, id: \.id) { something in
    BarMark(
        x: .value("Date", something.tag.date, unit: .day),
        y: .value("Duration", something.tag.duration)
    )
    .foregroundStyle(by: .value("Tag", something.tag))
    .barWidth(.flexible(min: 15, max: 25)) // 按需调整柱状条的宽度范围
}
// 强制X轴仅显示设定的7天范围
.chartXScale(domain: startDate...endDate)
// 可选：自定义X轴标签，只显示7天的日期标识
.chartXAxis {
    AxisMarks(position: .bottom) { value in
        if let date = value.as(Date.self) {
            AxisGridLine()
            AxisTick()
            AxisLabel(content: {
                Text(date.formatted(.dateTime.day()))
            })
        }
    }
}

额外说明： #

• 如果你的somethings数组本身就只有7条数据，移除滚动修饰符后图表通常会自动适配，但加上chartXScale能确保X轴不会出现额外空白或数据截断。
• barWidth的灵活设置可以让柱状条在不同屏幕尺寸下保持合适的间距，避免过于拥挤或松散。

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