我正在尝试使用 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
}
您可以使用
collisionResolution
作为轴标签,例如像这样:
AxisValueLabel(format: .dateTime.year(), centered: true, collisionResolution: .greedy)