SwiftChart实现无间距柱状图（仿AreaChart效果）

我想做一个无间距的柱状图，让它的视觉效果和AreaChart完全一致。目前数据数组的大小、图表宽度、缩放值都是不固定的，我用以下代码计算柱宽：

GeometryReader { geometry in
      ...                         
      let width = geometry.size.width / chartDataCount * viewModel.options.zoomValue                                
      chartContent(width: width)
      ...
}

然后在图表内容构建方法里实现：

private func chartContent(width: CGFloat) -> some View {
   Chart {
            ForEach(viewModel.spectrumChart.data.indices, id: \.self) { index in
                let point = viewModel.spectrumChart.data[index]
                BarMark(
                    x: .value("xValue", index),
                    yStart: .value("minValue", 0),
                    yEnd: .value("yValue", point.yValue),
                    width: .fixed(width)
                )
      ...
     }
      .chartXScale(domain: 0... viewModel.spectrumChart.data.count - 1)

}

现有效果：柱状图之间存在明显间距，没有完全贴合；
目标效果：柱状图完全无间距，形成连续的视觉块，和面积图外观一致。

请问怎么实现预期的无间距柱状图效果？

解决方案 #

问题核心在于手动宽度计算的逻辑和X轴刻度范围的设置，以下是几种可行的解决方式：

1. 让Chart自动处理柱子宽度（推荐）

删掉手动计算的width参数，移除BarMark的固定宽度设置，同时调整X轴的刻度范围，让柱子自动填满整个空间：

private func chartContent() -> some View {
   Chart {
            ForEach(viewModel.spectrumChart.data.indices, id: \.self) { index in
                let point = viewModel.spectrumChart.data[index]
                BarMark(
                    x: .value("xValue", index),
                    yStart: .value("minValue", 0),
                    yEnd: .value("yValue", point.yValue)
                )
      ...
     }
      .chartXScale(
          domain: 0...viewModel.spectrumChart.data.count - 1,
          type: .linear
      )
      .chartXAxis(.hidden) // 不需要X轴刻度时可以隐藏
}

这种方式让SwiftUI Chart自动适配柱子宽度，确保它们紧密排列无间隙。

2. 修正手动宽度计算逻辑

如果必须手动控制宽度，需要调整X轴的范围，让每个柱子的边缘刚好对齐相邻柱子：

GeometryReader { geometry in
      ...                         
      let totalWidth = geometry.size.width * viewModel.options.zoomValue
      let width = totalWidth / CGFloat(viewModel.spectrumChart.data.count)
      chartContent(width: width)
      ...
}

private func chartContent(width: CGFloat) -> some View {
   Chart {
            ForEach(viewModel.spectrumChart.data.indices, id: \.self) { index in
                let point = viewModel.spectrumChart.data[index]
                BarMark(
                    x: .value("xValue", index),
                    yStart: .value("minValue", 0),
                    yEnd: .value("yValue", point.yValue),
                    width: .fixed(width)
                )
      ...
     }
      .chartXScale(
          domain: -0.5...(CGFloat(viewModel.spectrumChart.data.count) - 0.5),
          type: .linear
      )
}

把X轴的domain范围从-0.5到数据数量-0.5，每个柱子的中心对应索引，宽度刚好覆盖相邻柱子的间隙，从而消除间距。

3. 直接用AreaMark模拟（最贴合目标效果）

如果追求和AreaChart完全一致的视觉表现，直接使用AreaMark更简单，它天然就是连续的：

Chart {
    AreaMark(
        x: .value("xValue", viewModel.spectrumChart.data.indices),
        y: .value("yValue", viewModel.spectrumChart.data.map { $0.yValue })
    )
    .interpolationMethod(.catmullRom) // 可选，让曲线更平滑
}

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