RuleMark 注释文本在图表框架 SwiftUI 中无法正确显示

Question

我尝试了 RuleMark 注释文本，但它没有正确显示，如所附屏幕截图中所示被截断。

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
                    // Added a optimal rule mark here
                    OptimalRuleMark()

                    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: .trailing) {
                    axis in
                    AxisGridLine()
                    AxisValueLabel(
                        centered: true
                    ) {
                        Text("\(axis.index * 25) min")
                    }
                }
            }
        }
        .padding()
    }
}

struct OptimalRuleMark: ChartContent {
    var body: some ChartContent {
        RuleMark(
            y: .value("Optimal value", 40)
        )
        .lineStyle(.init(dash: [2, 2]))
        .annotation(
            position: .leading,
            alignment: .leading,
            spacing: 5,
            overflowResolution: AnnotationOverflowResolution(x: .fit(to: .plot), y: .fit)
        ) {
            Text("Optimal")
        }
    }
}

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),
    ]
}

问题：

RuleMark

注释标签被截断并显示最后一些字母，并用红色矩形突出显示。它应该显示Optimal完整的单词，正如我在注释中给出的那样

Text

有人可以给我任何建议来解决这个问题吗？

我想在左侧显示注释文本，然后条形图应该开始绘制。

我已尝试使用

overflowResolution

进行以下注释，但仍然不起作用。

请找到以下截图 -

Answer 1

我想在左侧显示注释文本，然后条形图应该开始绘制。

听起来这不应该是

annotation

，而应该是 Y 轴的一部分。具体来说，这是 Y 轴左侧的值标签。

将新的

AxisMarks

添加到

chartYAxis

：

.chartYAxis {
    AxisMarks(position: .trailing) {
        axis in
        AxisGridLine()
        AxisValueLabel(
            centered: true
        ) {
            Text("\(axis.index * 25) min")
        }
    }

    // NEW:
    AxisMarks(position: .leading, values: [40]) {
        AxisValueLabel("Optimal")
    }
}

这个

AxisMarks

应该只有一个值 - 与

RuleMark

的 y 值相同。

输出：