我尝试创建带有没有任何间距的条形图,我希望它看起来像区域图。 我有不同的数组大小、宽度和缩放。我在下面的代码中计算了条形的宽度
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 轴更改为
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)
)
}
}
}