Swift Charts如何设置柱状图固定柱宽？

Swift Charts 默认会根据数据量自动分配柱宽，要实现固定尺寸的柱子，核心是手动控制BarMark的宽度，并配合横向滚动避免数据过多时的挤压。以下是可直接运行的完整示例：

完整代码示例 #

import SwiftUI
import Charts

struct SalesData: Identifiable {
    let id = UUID()
    let category: String
    let value: Double
}

struct FixedWidthBarChartView: View {
    // 自定义固定柱宽（单位：SwiftUI 点）
    private let fixedBarWidth: CGFloat = 30
    
    // 测试数据，可修改数量验证效果
    let testData: [SalesData] = [
        SalesData(category: "产品A", value: 120),
        SalesData(category: "产品B", value: 90),
        SalesData(category: "产品C", value: 150),
        SalesData(category: "产品D", value: 85),
        SalesData(category: "产品E", value: 110)
        // 可继续添加更多数据测试滚动效果
    ]
    
    var body: some View {
        Chart(testData) { item in
            BarMark(
                x: .value("产品分类", item.category),
                y: .value("销售额", item.value)
            )
            // 核心：设置固定柱宽
            .barWidth(fixedBarWidth)
            .foregroundStyle(.indigo)
        }
        .chartXAxis {
            AxisMarks(position: .bottom) { index in
                AxisGridLine()
                AxisTick()
                AxisLabel(alignment: .center, centered: true) {
                    // 旋转标签避免数据过多时重叠
                    Text(testData[index.index].category)
                        .rotationEffect(.degrees(90))
                        .frame(height: 70)
                }
            }
        }
        // 启用横向滚动，保证数据过多时柱宽不变
        .frame(height: 320)
        .scrollableAxes(.horizontal)
        .padding(.horizontal)
    }
}

#Preview {
    FixedWidthBarChartView()
}

关键说明 #

• 固定柱宽：通过.barWidth(fixedBarWidth)直接指定柱子的宽度，单位是SwiftUI的点，无论数据量多少，柱子尺寸都会保持设定值。
• 横向滚动适配：添加.scrollableAxes(.horizontal)后，当数据数量超出图表宽度时，图表会自动支持横向滚动，避免柱子被挤压变窄。
• 标签优化：旋转X轴标签是为了避免数据过多时标签重叠，你可以根据需求调整旋转角度或标签样式。

如果需要进一步控制柱子之间的间距，可以结合chartXScale调整X轴的 padding，例如：

.chartXScale(range: .plotDimension(padding: fixedBarWidth * 0.5))

这个设置会在柱子两侧添加固定的间距，让布局更均匀。

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