如何在 SwiftUI 图表中一次精确显示 7 个柱形图？

Question

我正在使用 SwiftUI 的图表，我想在屏幕上同时显示 7 个条形图。目前，使用以下代码片段，我在 iPhone 11 上一次只能看到 3 个条，我想对此进行调整，以便同时看到 7 个条。

这是我当前的实现：

Chart(somethings, id: \.id) { something in
    BarMark(
        x: .value("Shape Type", something.tag.date, unit: .day),
        y: .value("Total Count", something.tag.duration)
    )
    .foregroundStyle(by: .value("Tag", something.tag))
}
.chartScrollableAxes(.horizontal)

我怀疑该问题可能与图表的水平滚动行为或条形的渲染方式有关。如何调整我的代码以确保一次显示 7 个条形图而无需滚动？

任何帮助或建议将不胜感激！

Answer 1

chartXVisibleDomain

是您需要的修饰符。

对于 分类数据（即，如果 x 值是字符串），您只需传入

7

即可表示“一次 7 个柱”。

但是，您似乎将

Date

作为 x 值。在这种情况下，

7

的意思是“一次 7 秒”。由于每个条代表一天，因此您需要通过

86400 * 7

。

这是一个完整的示例：

struct ChartData: Identifiable {
    let date: Date
    let duration: TimeInterval
    
    var id: Date { date }
}

let data = [
    ChartData(date: .now, duration: 1),
    ChartData(date: .now.addingTimeInterval(86400 * 1), duration: 1),
    ChartData(date: .now.addingTimeInterval(86400 * 2), duration: 2),
    ChartData(date: .now.addingTimeInterval(86400 * 3), duration: 3),
    ChartData(date: .now.addingTimeInterval(86400 * 4), duration: 4),
    ChartData(date: .now.addingTimeInterval(86400 * 5), duration: 5),
    ChartData(date: .now.addingTimeInterval(86400 * 6), duration: 6),
    ChartData(date: .now.addingTimeInterval(86400 * 7), duration: 7),
    ChartData(date: .now.addingTimeInterval(86400 * 8), duration: 8),
    ChartData(date: .now.addingTimeInterval(86400 * 9), duration: 9),
    ChartData(date: .now.addingTimeInterval(86400 * 10), duration: 10),
]

struct ContentView: View {
    
    var body: some View {
        Chart(data) { x in
            BarMark(
                x: .value("X", x.date, unit: .day),
                y: .value("Y", x.duration)
            )
        }
        .chartScrollableAxes(.horizontal)
        .chartXVisibleDomain(length: 7 * 86400)
    }
}