Programmiererforum

private struct ChartView: View {
let sections: [BoughtItemsByTagSection]

var body: some View {
Chart(sections) { section in
BarMark(x: .value("Price", section.header.totalPrice),
y: .value("Category", section.header.name))
.foregroundStyle(Theme.accentSec)
}
.chartLegend(.hidden)
.chartXAxis(.hidden)
.chartYAxis {
AxisMarks { _ in
AxisValueLabel()
.foregroundStyle(Color.black)
}
}
.aspectRatio(1, contentMode: .fit)
}
}

private struct ChartView: View {
let sections: [BoughtItemsByTagSection]
@State private var progress: Float = 0

var body: some View {
Chart(sections) { section in
BarMark(
xStart: .value("Start", 0),
xEnd: .value("Price", section.header.totalPrice * progress),
y: .value("Category", section.header.name)
)
.foregroundStyle(Theme.accentSec)
.position(by: .value("Alignment", 0))
}
.chartLegend(.hidden)
.chartXAxis(.hidden)
.chartYAxis {
AxisMarks { _ in
AxisValueLabel()
.foregroundStyle(Color.black)
}
}
.aspectRatio(1, contentMode: .fit)
.onAppear {
animateChart()
}
}

private func animateChart() {
progress = 0 // Start from zero
withAnimation(.easeOut(duration: 1.5)) {
progress = 1
}
}
}

Ich habe dieses Diagramm:
[code]private struct ChartView: View {
let sections: [BoughtItemsByTagSection]

var body: some View {
Chart(sections) { section in
BarMark(x: .value("Price", section.header.totalPrice),
y: .value("Category", section.header.name))
.foregroundStyle(Theme.accentSec)
}
.chartLegend(.hidden)
.chartXAxis(.hidden)
.chartYAxis {
AxisMarks { _ in
AxisValueLabel()
.foregroundStyle(Color.black)
}
}
.aspectRatio(1, contentMode: .fit)
}
}

[/code]
wobei ich eine einfache Animation möchte, die die horizontalen Balken von links nach rechts vergrößert. Ich habe mehrere Versuche unternommen, der nächste:
[code]private struct ChartView: View {
let sections: [BoughtItemsByTagSection]
@State private var progress: Float = 0

var body: some View {
Chart(sections) { section in
BarMark(
xStart: .value("Start", 0),
xEnd: .value("Price", section.header.totalPrice * progress),
y: .value("Category", section.header.name)
)
.foregroundStyle(Theme.accentSec)
.position(by: .value("Alignment", 0))
}
.chartLegend(.hidden)
.chartXAxis(.hidden)
.chartYAxis {
AxisMarks { _ in
AxisValueLabel()
.foregroundStyle(Color.black)
}
}
.aspectRatio(1, contentMode: .fit)
.onAppear {
animateChart()
}
}

private func animateChart() {
progress = 0 // Start from zero
withAnimation(.easeOut(duration: 1.5)) {
progress = 1
}
}
}
[/code]
Aber es gibt das Problem, dass die Balken von der Mitte aus wachsen und nicht von links, was der natürliche Anker für dieses Diagramm ist. Wie lässt man sie vom linken Rand aus wachsen?