如何用SwiftUI的SectorMark实现半甜甜圈（半环形）图表？

完全可以通过SectorMark实现你需要的半甜甜圈（半圆环形）图表，只需要在现有代码基础上添加角度范围限制，并调整刻度配置即可。以下是修改后的完整代码示例：

struct Score: Identifiable {
    let id = UUID()
    let type: String
    let value: Int
}

@State private var scores: [Score] = [
    .init(type: "答对", value: 1),
    .init(type: "答错", value: 9)
]

// 计算总题数，用于角度刻度配置
private var totalQuestions: Int {
    scores.reduce(0) { $0 + $1.value }
}

var body: some View {
    Chart(scores) { score in
        SectorMark(
            angle: .value("题数", score.value),
            innerRadius: .ratio(0.7),
            outerRadius: .ratio(0.9),
            // 设置角度范围为180度，形成半圆（这里是上半圆，可根据需求调整角度值）
            startAngle: .degrees(180),
            endAngle: .degrees(0)
        )
        .foregroundStyle(by: .value("答题类型", score.type))
    }
    // 指定角度刻度的定义域为总题数，确保每个项的角度占比匹配实际题数比例
    .chartAngleScale(domain: 0...totalQuestions)
}

关键修改说明： #

• 角度范围限制：通过startAngle和endAngle参数，将扇形的绘制范围限制在180度区间内（示例中是从180度到0度，对应上半圆），直接实现半圈效果。如果需要下半圆，可以改为startAngle: .degrees(90), endAngle: .degrees(270)。
• 角度刻度配置：添加.chartAngleScale(domain: 0...totalQuestions)，让角度刻度的总范围对应总题数，这样每个得分项的角度占比会准确匹配其在总题数中的比例，避免出现角度计算偏差。
• 样式调整：保持innerRadius和outerRadius的比例设置，确保图表呈现环形（甜甜圈）形态。

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