collisionResolution 截断不适用于图表框架 SwiftUI 中的 AxisValueLabel

Question

我尝试将碰撞解决方案作为 AxisValueLabel 中的截断。正如苹果中所记录的，将标签截断为可用空间，但它不起作用。

import Charts
import SwiftUI

struct YAxisLabel: View {
    
    let workoutData = [
        (workoutType: "Walk", data: Workout.walkWorkout),
        (workoutType: "Run", data: Workout.runWorkout)
    ]
    
    var body: some View {
        VStack {
            Chart {
                ForEach(workoutData, id: \.workoutType) { element in
                    ForEach(element.data) {
                        BarMark(
                            x: .value("Day", $0.day),
                            y: .value("Workout(in minutes)", $0.minutes)
                        )
                    }
                    .foregroundStyle(by: .value("Workout(type)", element.workoutType))
                    .position(by: .value("Workout(type)", element.workoutType)) // Asif - this craetes grouped
                }
            }
            .frame(height: 200)
            .chartYAxis {
                AxisMarks(position: .leading) {
                    axis in
                    AxisGridLine()
                    AxisValueLabel(
                        centered: true,
                        collisionResolution: .truncate,
                        orientation: AxisValueLabelOrientation.verticalReversed
                    ) {
                        Text("\(axis.index * 25) minutes")
                    }
                }
            }
        }
        .padding()
    }
}

struct Workout: Identifiable {
    let id = UUID()
    let day: String
    let minutes: Int
}

extension Workout {
    static let walkWorkout: [Workout] = [
        .init(day: NSLocalizedString("mon", comment: ""), minutes: 23),
        .init(day: "Tue", minutes: 35),
        .init(day: "Wed", minutes: 55),
        .init(day: "Thu", minutes: 30),
        .init(day: "Fri", minutes: 15),
        .init(day: "Sat", minutes: 65),
        .init(day: "Sun", minutes: 81),
    ]
    
    static let runWorkout: [Workout] = [
        .init(day: NSLocalizedString("mon", comment: ""), minutes: 16),
        .init(day: "Tue", minutes: 12),
        .init(day: "Wed", minutes: 55),
        .init(day: "Thu", minutes: 34),
        .init(day: "Fri", minutes: 22),
        .init(day: "Sat", minutes: 43),
        .init(day: "Sun", minutes: 90),
    ]
}

问题： 标签相互覆盖。

它应该按照苹果文档被截断 collisionResolution: .truncate => 将标签截断至可用空间。

我想在这里做两件事 -

1. 文本应被裁剪
2. 或者面积应该按照大标签扩大

请找到以下截图 -

Answer 1

据我所知，在这种情况下，collisionResolution 似乎不能令人满意地工作。虽然调整框架、字体或组合似乎得到了不错的结果。

将框架高度从 200 更改为 300 以扩大行大小：

.frame(height: 300) 框架高度为300的图表：

或者，如果必须保留原始帧大小 200，则更改 Axis 字体大小似乎也可以：

//Labels for y Axis
Text("\(axis.index * 25) minutes")
    .font(.system(size: 7))

//Labels for x Axis
.chartXAxis {
    AxisMarks {
        AxisValueLabel()
        .font(.system(size: 7))
    }
}

缩小字体大小的图表：