SwiftUI中如何将条形图Y轴类别标签置于条形左侧

我正尝试在SwiftUI中使用Charts框架实现横向条形图，并将Y轴的类别标签（如fish、cat等）放置在条形的左侧，但调整chartYAxis相关设置后仍未成功。当前代码及生成的图表效果如下：

当前代码

import SwiftUI
import Charts

struct ChartData: Identifiable {
    let id = UUID()
    let type: String
    let count: Int
}

struct BarChartExampleView: View {
    let data = [ChartData(type: "fish", count: 10),
                ChartData(type: "reptils", count: 21),
                ChartData(type: "bird", count: 18),
                ChartData(type: "dog", count: 40),
                ChartData(type: "cat", count: 65)]
    
    var body: some View {
        Chart(data) { dataPoint in
            
            BarMark(x: .value("Population", dataPoint.count),
                    y: .value("Type", dataPoint.type))
            .foregroundStyle(by: .value("Type", dataPoint.type))
            .annotation(position: .trailing) {
                Text(String(dataPoint.count))
                    .foregroundColor(.gray)
            }
        }
        .chartLegend(.hidden)
        .chartXAxis(.hidden)
        .chartYAxis {
            AxisMarks { _ in
                AxisValueLabel()
            }
        }
        .aspectRatio(1, contentMode: .fit)
        .padding()
    }
}

#Preview {
    BarChartExampleView()
}

当前图表效果

要将Y轴类别标签移到条形左侧，只需调整AxisMarks的位置参数，并优化标签对齐方式，具体修改如下：

关键修改点 #

• 给AxisMarks添加position: .leading参数，指定轴标记显示在图表区域的左侧
• 为AxisValueLabel设置alignment: .trailing，让标签紧贴条形左边缘
• 可选：设置X轴的定义域（chartXScale），确保条形不会和左侧标签重叠

修改后的完整代码 #

import SwiftUI
import Charts

struct ChartData: Identifiable {
    let id = UUID()
    let type: String
    let count: Int
}

struct BarChartExampleView: View {
    let data = [ChartData(type: "fish", count: 10),
                ChartData(type: "reptils", count: 21),
                ChartData(type: "bird", count: 18),
                ChartData(type: "dog", count: 40),
                ChartData(type: "cat", count: 65)]
    
    var body: some View {
        Chart(data) { dataPoint in
            BarMark(x: .value("Population", dataPoint.count),
                    y: .value("Type", dataPoint.type))
            .foregroundStyle(by: .value("Type", dataPoint.type))
            .annotation(position: .trailing) {
                Text(String(dataPoint.count))
                    .foregroundColor(.gray)
            }
        }
        .chartLegend(.hidden)
        .chartXAxis(.hidden)
        // 修改Y轴设置，将标签移到左侧
        .chartYAxis {
            AxisMarks(position: .leading) { _ in
                AxisValueLabel(alignment: .trailing)
                AxisGridLine() // 保留网格线，增强可读性
            }
        }
        // 设置X轴定义域，避免条形与左侧标签重叠
        .chartXScale(domain: 0...70)
        .aspectRatio(1, contentMode: .fit)
        .padding()
    }
}

#Preview {
    BarChartExampleView()
}

效果说明 #

修改后，Y轴的类别标签会显示在每个条形的左侧，同时网格线保持正常显示，X轴定义域的设置确保条形和标签之间有足够间距，不会出现重叠问题。

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