Swift Charts 不会显示带有 AxisMarks 的最后一个 x 轴 AxisValueLabel

Question

我正在使用新的快速图表框架来显示一些数据。为了手动控制 x 轴 AxisValueLabels 的频率以及调整颜色，我实现了以下内容：

.chartXAxis {
    AxisMarks(values: .automatic(desiredCount: 11, roundLowerBound: true, roundUpperBound: true)) { _ in
        AxisGridLine(stroke: .init(lineWidth: 1)).foregroundStyle(Color.orange)
        AxisValueLabel().foregroundStyle(Color.orange).font(.subheadline).offset(x: -10)
    }
}

我想显示每个 x 轴值的值（有 11 个点，但仅显示 10 个）。我已经尝试了无数的方法，但无法通过调整desiredCount参数来显示它应该显示的内容。将不胜感激在这件事上的任何帮助..

import Charts
import Foundation
import SwiftUI

struct FakeData: Codable {
    var questionAndAnswers: [Int: Int]
    var timePerQuestion: [Double]
    var date: Date = .now
}

extension FakeData {
    static let oneFakeInstance = FakeData(questionAndAnswers: [1875: 1875,
                                                               1890: 1890,
                                                               1980: 1980,
                                                               2112: 2112,
                                                               2726: 2726,
                                                               4088: 4088,
                                                               4284: 4284,
                                                               4784: 4784,
                                                               4800: 4800,
                                                               663: 663,
                                                               1098: 1098], timePerQuestion: [
            28.700000000000138,
            11.600000000000165,
            12.00000000000017,
            25.599999999999376,
            11.999999999999318,
            19.19999999999891,
            12.799999999999272,
            7.199999999999605,
            11.699999999999335,
            39.299999999997766, 19.299999999997766
        ])
}

struct CH1: View {
    func convertToShowable(_ QuizquestionAnswers: [Int: Int] = FakeData.oneFakeInstance.questionAndAnswers, _ quizTimes: [Double] = FakeData.oneFakeInstance.timePerQuestion) -> [Int: Double] {
        var time_per_question: [Int: Double] = [:]
        for (index, key_value) in QuizquestionAnswers.enumerated() {
            if key_value.value == key_value.key {
                time_per_question[index] = quizTimes[index]
            }
        }
        return time_per_question
    }
    
    var body: some View {
        ZStack {
            Color.black.edgesIgnoringSafeArea(.all)
        
            VStack {
                Chart {
                    ForEach(convertToShowable().sorted(by: { $0.key < $1.key }), id: \.key) { key, value in
                        BarMark(x: .value("Question", key),
                                y: .value("Time", value))
                            .foregroundStyle(Color.white)
                    }
                }
                .chartYAxis {
                    AxisMarks(values: .automatic) { _ in
                        AxisValueLabel().foregroundStyle(Color.orange).offset(x: 10).font(.subheadline)
                    }
                }
                
                .chartXAxis {
                    AxisMarks(values: .automatic(desiredCount: 11, roundLowerBound: true, roundUpperBound: true)) { _ in
                        AxisGridLine(stroke: .init(lineWidth: 1)).foregroundStyle(Color.orange)
                        AxisValueLabel().foregroundStyle(Color.orange).font(.subheadline).offset(x: -10)
                    }
                }
                
                .frame(width: 350, height: 250)
            }
        }
    }
}

你可以看到这里应该有一个10，但是什么也没有：

Answer 1

使用AxisMarks(preset: .aligned, values: ..就是您正在寻找的。然后你也可以删除偏移量。

Answer 2

试试这个来显示你的 11 分：

 .chartXScale(domain: 0...11)