Wie kann ich eine Swift -Chart -Achse stylen, um Zecken über der unteren Gitterlinie zu haben, und immer einen Start- un ⇐ IOS

[Anonymous]

Anforderungen < /h1>
Ich verwende Swift -Diagramme, um ein Zeilendiagramm zu erstellen, das im Laufe der Zeit die Bestandswerte darstellt, und ziele auf ein Design mit Einschaltschnitten in jedem Monat. Ich brauche die Start-, End- und Mittelzellen, um größer zu sein und ein Etikett unter dem Tick einzuschließen. und haben es geschafft, die Achse so aussehen zu lassen:

Es ist in der Nähe des Designs, aber ich habe zwei herausragende Probleme. Abstand zwischen der unteren Gitterlinie und den Wertbezeichnungen < /H3>
Ich habe den vertikalen Abstand auf 0 gesetzt, aber ich bemerke, dass zwischen der unteren Achse -Gitterlinie und der Achsenwertkennzeichnung etwa 16 Abstandspunkte vorhanden sind. Das Einstellen von Verticalspacing auf -16 gibt mir das gewünschte Ergebnis, aber es fühlt sich nicht wie die richtige Lösung an.
Woher kommt dieser zusätzliche Abstand und wie kann ich sie beheben? Erste und letzte X-Achse-Zecken mit Datumsbezeichnungen < /h3>
Ich möchte sicherstellen, dass die ersten und letzten X-Achse-Zecken wichtige Zecken mit den entsprechenden Datumsbezeichnungen sind. Wie kann ich sicherstellen, dass diese Zecken als Hauptmarke markiert sind und Etiketten haben?

Code: Select all

import SwiftUI
import Charts

struct PlanValue: Codable, Identifiable {
let value: Double
let date: Date

var id: Date { date }
}

// Date formatter to parse the date strings
let dateFormatter: ISO8601DateFormatter = {
let formatter = ISO8601DateFormatter()
formatter.formatOptions = [.withFullDate]
return formatter
}()

let fundValues: [PlanValue] = [
PlanValue(value: 100.58, date: dateFormatter.date(from: "2023-01-30")!),
PlanValue(value: 200.22, date: dateFormatter.date(from: "2023-01-31")!),
PlanValue(value: 505.66, date: dateFormatter.date(from: "2023-02-28")!),
PlanValue(value: 399.33, date: dateFormatter.date(from: "2023-03-31")!),
PlanValue(value: 5652.37, date: dateFormatter.date(from: "2023-04-30")!),
PlanValue(value: 5755.66, date: dateFormatter.date(from: "2023-05-31")!),
PlanValue(value: 5850.81, date: dateFormatter.date(from: "2023-06-30")!),
PlanValue(value: 6002.82, date: dateFormatter.date(from: "2023-07-31")!),
PlanValue(value: 5750.62, date: dateFormatter.date(from: "2023-08-31")!),
PlanValue(value: 5699.93, date: dateFormatter.date(from: "2023-09-30")!),
PlanValue(value: 5820.01, date: dateFormatter.date(from: "2023-10-31")!),
PlanValue(value: 6105.03, date: dateFormatter.date(from: "2023-11-30")!),
PlanValue(value: 6291.02, date: dateFormatter.date(from: "2023-12-31")!),
PlanValue(value: 6399.48, date: dateFormatter.date(from: "2024-01-31")!),
PlanValue(value: 6544.99, date: dateFormatter.date(from: "2024-02-29")!),
PlanValue(value: 6700.69, date: dateFormatter.date(from: "2024-03-31")!),
PlanValue(value: 6850.57, date: dateFormatter.date(from: "2024-04-30")!),
PlanValue(value: 6998.78, date: dateFormatter.date(from: "2024-05-31")!),
PlanValue(value: 6400.39, date: dateFormatter.date(from: "2024-06-30")!),
PlanValue(value: 6450.33, date: dateFormatter.date(from: "2024-07-31")!),
PlanValue(value: 29555.39, date: dateFormatter.date(from: "2024-08-31")!),
PlanValue(value: 30300.39, date: dateFormatter.date(from: "2024-09-30")!),
PlanValue(value: 30836.33, date: dateFormatter.date(from: "2024-10-31")!),
PlanValue(value: 30750.06, date: dateFormatter.date(from: "2024-11-30")!),
PlanValue(value: 31011.97, date: dateFormatter.date(from: "2024-12-31")!),
PlanValue(value: 32500.24, date: dateFormatter.date(from: "2025-01-29")!)
]

struct ContentView: View {
var body: some View {
Chart {
// Fund Values
ForEach(fundValues) { planValue in
LineMark(x: .value("Date", planValue.date),
y: .value("Value", planValue.value)
)
}
}
.chartXAxis {
let numberOfMajorTicks = 3
// Major Ticks + Labels
AxisMarks(preset: .aligned, values: .automatic(desiredCount: numberOfMajorTicks) ) { value in
AxisValueLabel(format: .dateTime.month().year(.twoDigits), verticalSpacing: 0)
}
AxisMarks(preset: .inset, values:  .automatic(desiredCount: numberOfMajorTicks)) { value in
AxisTick(length: 16, stroke: StrokeStyle(lineWidth: 1))
.foregroundStyle(Color.black)
}

// Minor Ticks
AxisMarks(preset: .inset, values: .stride (by: .month)) { value in
AxisTick(centered: true, length: 8, stroke: StrokeStyle(lineWidth: 1))
.foregroundStyle(Color.black)
}
}
.chartYAxis {
AxisMarks(preset: .aligned, values: .automatic(desiredCount: 7) ) { value in
let isFirstLine = value.index == 0
AxisGridLine(stroke: StrokeStyle(lineWidth: 1, dash: [isFirstLine ? 0 : 4], dashPhase: 0))
.foregroundStyle(isFirstLine ? .black : .gray)
AxisValueLabel(format: .currency(code: "GBP").notation(.compactName))
}
}

.frame(height: 275)
.padding()
}
}

#Preview {
ContentView()
}