You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

使用Swift Charts制作日期条形图时X轴标签动画异常问题

Swift Charts 切换周数据时X轴标签动画异常

我用Swift Charts构建了一个条形图,用来展示指定一周的每日总计数据。在连续周之间切换时,发现X轴的第一个标签动画表现异常,会比预期多停留一段时间。

我添加了一个按钮用于带动画切换当前周与上周的数据,以下是可复现问题的代码:

import Charts
import Foundation
import SwiftUI

struct DailyTotal: Identifiable {
    let date: Date
    let value: Double
    
    var id: Date { date }
}

struct ChartView: View {
    @State private var displayCurrentWeek = true
    @State private var totals = Self.currentWeekTotals
    
    var body: some View {
        VStack {
            Chart(totals) { total in
                BarMark(
                    x: .value("Day", total.date, unit: .day),
                    y: .value("Total", total.value)
                )
            }
            .chartXAxis {
                AxisMarks(values: .stride(by: .day)) { _ in
                    AxisValueLabel(format: .dateTime.weekday(), centered: true)
                }
            }
            .frame(height: 200)
            
            Button("Toggle Week") {
                withAnimation {
                    displayCurrentWeek.toggle()
                    totals = displayCurrentWeek ? Self.currentWeekTotals : Self.previousWeekTotals
                }
            }
        }
    }
}

let dayDuration: TimeInterval = 24 * 3600

extension ChartView {
    static let previousWeekTotals = [
        DailyTotal(date: Date(timeIntervalSinceReferenceDate: -13 * dayDuration), value: 10),
        DailyTotal(date: Date(timeIntervalSinceReferenceDate: -12 * dayDuration), value: 10),
        DailyTotal(date: Date(timeIntervalSinceReferenceDate: -11 * dayDuration), value: 25),
        DailyTotal(date: Date(timeIntervalSinceReferenceDate: -10 * dayDuration), value: 20),
        DailyTotal(date: Date(timeIntervalSinceReferenceDate: -09 * dayDuration), value: 5),
        DailyTotal(date: Date(timeIntervalSinceReferenceDate: -08 * dayDuration), value: 10),
        DailyTotal(date: Date(timeIntervalSinceReferenceDate: -07 * dayDuration), value: 5),
    ]
    
    static let currentWeekTotals = [
        DailyTotal(date: Date(timeIntervalSinceReferenceDate: -6 * dayDuration), value: 20),
        DailyTotal(date: Date(timeIntervalSinceReferenceDate: -5 * dayDuration), value: 15),
        DailyTotal(date: Date(timeIntervalSinceReferenceDate: -4 * dayDuration), value: 5),
        DailyTotal(date: Date(timeIntervalSinceReferenceDate: -3 * dayDuration), value: 10),
        DailyTotal(date: Date(timeIntervalSinceReferenceDate: -2 * dayDuration), value: 20),
        DailyTotal(date: Date(timeIntervalSinceReferenceDate: -1 * dayDuration), value: 15),
        DailyTotal(date: Date(timeIntervalSinceReferenceDate: -0 * dayDuration), value: 10),
    ]
}

struct ChartView_Previews: PreviewProvider {
    static var previews: some View {
        ChartView()
            .padding()
            .previewInterfaceOrientation(.landscapeLeft)
    }
}

在预览中点击切换按钮,可以看到'Tue'或'Wed'标签出现异常闪烁:

图表动画异常效果

这看起来像是Swift Charts的问题,但也可能是我的实现方式有误。另外我发现,如果不自定义X轴就不会出现该问题,但默认设置不符合我的设计需求。

希望能得到帮助!


内容的提问来源于stack exchange,提问作者Emanuel Jarnea

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.28 13:17:51