SwiftUI图表双轴标签及图例不显示问题求助

你的代码能正常渲染图表，但轴标签和图例不显示，原因是SwiftUI Charts默认不会自动开启这些元素的展示，需要手动配置对应的修饰器。

修复后的完整代码如下：

struct ReferData: Identifiable, Hashable {
    let id = UUID()
    let month: String
    let referCount: Int
    
    init(month: String, referCount: Int) {
        self.month = month
        self.referCount = referCount
    }
}

import Charts
struct ReferDashBoardView: View {
    
    @State var referData: [ReferData] = [
        ReferData(month: "Jan", referCount: 10),
        ReferData(month: "Feb", referCount: 23),
        ReferData(month: "Mar", referCount: 18),
        ReferData(month: "Apr", referCount: 48),
        ReferData(month: "May", referCount: 12),
        ReferData(month: "June", referCount: 38),
        ReferData(month: "July", referCount: 23),
        ReferData(month: "Aug", referCount: 29),
        ReferData(month: "Sept", referCount: 34),
        ReferData(month: "Oct", referCount: 42),
        ReferData(month: "Nov", referCount: 32),
        ReferData(month: "Dec", referCount: 45)
    ]
    
    var body: some View {
        ScrollView(.vertical, showsIndicators: false) {
            VStack(alignment: .leading, spacing: 12){
                
                Chart{
                    ForEach(referData, id: \.self) { item in
                        // 新增series参数，用于关联图例
                        BarMark(
                            x: .value("Month", item.month),
                            y: .value("Refer Count", item.referCount),
                            series: .value("Referrals", "Referrals")
                        )
                    }
                }
                .foregroundColor(.orange)
                // 配置X轴标签：显示月份文本，自定义字体
                .chartXAxis {
                    AxisMarks(position: .bottom) { value in
                        AxisGridLine()
                        AxisTick()
                        AxisLabel(content: {
                            Text(value.as(String.self) ?? "")
                                .font(.caption)
                        })
                    }
                }
                // 配置Y轴标签：显示数值，自定义字体
                .chartYAxis {
                    AxisMarks(position: .leading) { value in
                        AxisGridLine()
                        AxisTick()
                        AxisLabel(content: {
                            Text(value.as(Int.self)?.description ?? "")
                                .font(.caption)
                        })
                    }
                }
                // 设置图例位置与对齐方式（可选，按需调整）
                .chartLegend(position: .bottom, alignment: .center)
            }
            .frame(maxWidth: .infinity)
            .frame(minHeight: 350)
        }
        .padding()
    }
}

关键修改点说明： #

• 轴标签配置：通过chartXAxis和chartYAxis修饰器，显式添加AxisMarks组件，强制展示轴网格线、刻度和文本标签，同时支持自定义标签字体等样式。
• 图例显示：给BarMark添加series参数指定系列名称，再通过chartLegend修饰器设置图例的位置，就能让图例正常展示。
• 统一了月份格式（将dec改为Dec），保持视觉一致性。

内容的提问来源于stack exchange，提问作者Akshay Gandal