使用 Swift Charts 格式化 BarMarks 中的 X 轴标签

Question

我正在尝试使用 AxisMarks(values: .automatic) 修饰符来格式化 x 轴标签，该修饰符不使标签居中。我尝试使用 stride(by: .year) ，它有效，但年份值被截断，这是由于 x 轴上的条数所致。有没有更好的方法使用 AxisMarks(values: .automatic)/或其他方法将标签在 x 轴上居中。下面是我的代码。非常感谢任何帮助/指导。

struct ContentView: View {
    let dateValues: [DateValue] = [
//        DateValue(date: Calendar.current.date(from: DateComponents(year: 2010, month: 12, day: 31))!, value: 1250),
//        DateValue(date: Calendar.current.date(from: DateComponents(year: 2011, month: 12, day: 31))!, value: 1600),
        DateValue(date: Calendar.current.date(from: DateComponents(year: 2012, month: 12, day: 31))!, value: 1750),
        DateValue(date: Calendar.current.date(from: DateComponents(year: 2013, month: 12, day: 31))!, value: 1900),
        DateValue(date: Calendar.current.date(from: DateComponents(year: 2014, month: 12, day: 31))!, value: 1800),
        DateValue(date: Calendar.current.date(from: DateComponents(year: 2015, month: 12, day: 31))!, value: 1700),
        DateValue(date: Calendar.current.date(from: DateComponents(year: 2016, month: 12, day: 31))!, value: 2000),
        DateValue(date: Calendar.current.date(from: DateComponents(year: 2017, month: 12, day: 31))!, value: 2100),
        DateValue(date: Calendar.current.date(from: DateComponents(year: 2018, month: 12, day: 31))!, value: 2000),
        DateValue(date: Calendar.current.date(from: DateComponents(year: 2019, month: 12, day: 31))!, value: 2250),
        DateValue(date: Calendar.current.date(from: DateComponents(year: 2020, month: 12, day: 31))!, value: 2225),
        DateValue(date: Calendar.current.date(from: DateComponents(year: 2021, month: 12, day: 31))!, value: 2300),
        DateValue(date: Calendar.current.date(from: DateComponents(year: 2022, month: 12, day: 31))!, value: 2500),
        DateValue(date: Calendar.current.date(from: DateComponents(year: 2023, month: 12, day: 31))!, value: 2600),
    ]
    var body: some View {
        Chart {
            ForEach(dateValues, id:\.date) { point in
                BarMark(
                    x: .value("Date", point.date, unit: .year),
                    y: .value("Value", point.value))
                .annotation(alignment: .center) {
                    Text(abs(point.value) >= 1e-03 ? String(format: "%.1f", point.value) : "")
                        .font(.caption2)
                        .rotationEffect(.degrees(-90))
                        .frame(width: 70)
                }
                .cornerRadius(5)
            }
        }
        .chartXAxis {
            AxisMarks(values: .automatic/*.stride(by: .year)*/) { year in
                AxisTick()
                AxisGridLine()
                AxisValueLabel(format: .dateTime.year(), centered: true)
            }
        }
    }
}

struct DateValue {
    var date: Date
    var value: Double
}

Answer 1

您可以使用

collisionResolution 

作为轴标签，例如像这样：

AxisValueLabel(format: .dateTime.year(), centered: true, collisionResolution: .greedy)