SwiftUI中使用Swift Charts绘制柱状图默认不显示坐标轴求助

问题描述 #

按照教程使用Swift Charts绘制柱状图，已准备模拟数据并完成ContentView编写，但X轴（职业类型）和Y轴（薪资）的内容未显示，图表截图如下：

当前代码如下：

import SwiftUI
import Charts

struct Items : Identifiable {
    var id = UUID()
    let type : String
    let value : Double
}
struct ContentView: View {
    let items : [Items] = [
        Items(type: "Medical", value: 10000),
        Items(type: "Engeneering", value: 5000),
        Items(type: "singing", value: 15000),
        Items(type: "pilot", value: 1000),
        Items(type: "athlete", value: 18000),
        ]
    
    var body: some View {
        NavigationView{
            ScrollView{
                Chart(items){item in
                    BarMark( x: .value("Job", item.type),
                             y: .value("salary", item.value)
                    )
                    .foregroundStyle(.brown)
                    .cornerRadius(10)
                }
                .frame(height: 200)
                .padding()
            }
            .navigationTitle("Charts")
        }
    }
}

解决方案 #

Swift Charts默认不会自动显示轴标签，需要显式添加轴配置，以下两种方式都可以解决：

方式一：简洁开启轴显示 #

直接使用.chartXAxis(.visible)和.chartYAxis(.visible)修饰符，采用默认样式显示轴标签：

// 在Chart视图的修饰符中添加
Chart(items){item in
    // ... 原有BarMark代码
}
.chartXAxis(.visible)
.chartYAxis(.visible)
.frame(height: 200)
.padding()

方式二：自定义轴样式 #

如果需要调整轴的网格线、刻度线或标签样式，可以使用完整的轴配置：

Chart(items){item in
    // ... 原有BarMark代码
}
// 自定义X轴
.chartXAxis {
    AxisMarks(position: .bottom) { _ in
        AxisGridLine()
        AxisTick()
        AxisValueLabel()
    }
}
// 自定义Y轴
.chartYAxis {
    AxisMarks(position: .leading) { _ in
        AxisGridLine()
        AxisTick()
        AxisValueLabel()
    }
}
.frame(height: 200)
.padding()

修改后的完整代码示例：

import SwiftUI
import Charts

struct Items : Identifiable {
    var id = UUID()
    let type : String
    let value : Double
}
struct ContentView: View {
    let items : [Items] = [
        Items(type: "Medical", value: 10000),
        Items(type: "Engeneering", value: 5000),
        Items(type: "singing", value: 15000),
        Items(type: "pilot", value: 1000),
        Items(type: "athlete", value: 18000),
        ]
    
    var body: some View {
        NavigationView{
            ScrollView{
                Chart(items){item in
                    BarMark( x: .value("Job", item.type),
                             y: .value("salary", item.value)
                    )
                    .foregroundStyle(.brown)
                    .cornerRadius(10)
                }
                .chartXAxis(.visible)
                .chartYAxis(.visible)
                .frame(height: 200)
                .padding()
            }
            .navigationTitle("Charts")
        }
    }
}

内容的提问来源于stack exchange，提问作者Abdo Assem11