SwiftChart 中没有间距的条形图

Question

我尝试创建带有没有任何间距的条形图，我希望它看起来像区域图。 我有不同的数组大小、宽度和缩放。我在下面的代码中计算了条形的宽度

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)

}

我得到了什么

我需要什么

我怎样才能达到预期的效果？

Answer 1

条形图通常用于显示分类数据，其中一个轴代表某种“类别”，而不是数字。如果将 x 轴更改为

String

，它将成为分类数据，并且您可以使用

width: .ratio(1)

表示每个条形图应占据所有可用宽度。

BarMark(
    x: .value("xValue", "\(index)"), // note that this is a string
    y: .value("yValue". point.yValue),
    width: .ratio(1)
)

这是一个更完整的示例：

struct ContentView: View {
        Chart([1,2,3,4,5,6,7,8,9,10], id: \.self) { i in
            BarMark(
                x: .value("X", "\(i)"),
                y: .value("Y", i),
                width: .ratio(1)
            )
        }
    }
}