SwiftUI Charts中如何调整BarMark之间的间距？

调整BarMark之间的间距 #

目前SwiftUI Charts没有专门的"bar spacing"参数，但可以通过两种方式实现间距控制：

• 通过Y轴样式设置分类间距
  给Chart添加.chartYAxis修饰符，利用AxisStyle的categorySpacing属性控制分类（此处为电影名称）之间的纵向空隙，数值越大，bar间距越宽：

  .chartYAxis {
      AxisMarks(position: .leading) {
          AxisGridLine()
          AxisTick()
          AxisValueLabel()
      }
      .axisStyle(AxisStyle(categorySpacing: 20)) // 调整数值控制间距
  }
  

• 给单个BarMark添加垂直内边距
  直接给每个BarMark添加.padding(.vertical, x)，手动增加上下空隙，这种方式更灵活，能精准控制单条bar的间距：

  BarMark(
      x: .value("Rating", rating),
      y: .value("Movie", movie),
      width: 30
  )
  .padding(.vertical, 8) // 增加垂直方向内边距
  // 其他修饰符保留
  

解决ScrollView内布局拥挤问题 #

针对放入ScrollView后布局拥挤的情况，可从以下两点优化：

• 给Chart添加整体内边距
  给Chart添加.padding()，让图表与ScrollView边缘保留足够空隙：

  Chart {
      // 内部实现
  }
  .padding() // 增加整体内边距
  .chartXAxisLabel("Rating")
  .chartYAxisLabel("Movie")
  

• 限制Chart的最小高度
  给Chart设置.frame(minHeight: CGFloat)，避免内容被过度压缩：

  Chart {
      // 内部实现
  }
  .frame(minHeight: 600) // 根据数据量调整最小高度
  // 其他修饰符保留
  

修改后的完整代码示例 #

ScrollView(.vertical) {
    Chart {
        ForEach(0...csv.rows.count-1, id: \.self) { i in
            let movie = csv.rows[i][0]
            let rating = Double(csv.rows[i][2]) ?? 0
            BarMark(
                x: .value("Rating", rating),
                y: .value("Movie", movie),
                width: 30
            )
            .padding(.vertical, 8) // 增加bar垂直间距
            .annotation(position: .trailing) {
                Text(String(format: "%.0f%%", rating)) // 修正百分号格式
                    .foregroundColor(Color.gray)
                    .font(.system(size: 12, weight: .bold))
            }
            .foregroundStyle(.linearGradient(
                colors: [.mint, .green],
                startPoint: .leading,
                endPoint: .trailing)
            )
            .cornerRadius(10)
        }
    }
    .padding() // 图表内边距
    .frame(minHeight: 600) // 限制最小高度
    .chartXAxisLabel("Rating")
    .chartYAxisLabel("Movie")
    .chartYAxis {
        AxisMarks(position: .leading) {
            AxisGridLine()
            AxisTick()
            AxisValueLabel()
        }
        .axisStyle(AxisStyle(categorySpacing: 15)) // Y轴分类间距
    }
}

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