iOS 16：能否使用SwiftUI Charts框架创建饼图/环形图？求代码示例

可以，iOS 16及以上版本的SwiftUI Charts框架完全支持创建饼图和环形图，WWDC22的演示内容也确认了这一功能。以下是具体实现示例：

1. 基础饼图实现 #

首先定义数据模型，再通过SectorMark构建饼图：

数据模型 #

import SwiftUI
import Charts

struct Category: Identifiable {
    let id = UUID()
    let name: String
    let value: Double
}

// 示例数据
let expenseData: [Category] = [
    Category(name: "购物", value: 350),
    Category(name: "餐饮", value: 280),
    Category(name: "交通", value: 120),
    Category(name: "娱乐", value: 200)
]

饼图视图 #

struct PieChartDemo: View {
    var body: some View {
        Chart(expenseData) { item in
            // 使用SectorMark绘制扇形区块
            SectorMark(
                angle: .value("支出金额", item.value),
                innerRadius: .ratio(0), // innerRadius为0时是实心饼图
                outerRadius: .ratio(0.7)
            )
            // 根据类别自动分配颜色
            .foregroundStyle(by: .value("支出类别", item.name))
        }
        .chartLegend(position: .bottom) // 将图例放在底部
        .frame(height: 300)
        .padding()
    }
}

2. 环形图（甜甜圈图）实现 #

环形图仅需调整SectorMark的innerRadius参数，还可添加中间标注文本：

struct DonutChartDemo: View {
    var body: some View {
        Chart(expenseData) { item in
            SectorMark(
                angle: .value("支出金额", item.value),
                innerRadius: .ratio(0.4), // 设置内半径比例实现环形效果
                outerRadius: .ratio(0.7)
            )
            .foregroundStyle(by: .value("支出类别", item.name))
            // 在环形中间添加总支出标注
            .annotation(position: .overlay) {
                VStack {
                    Text("总支出")
                        .font(.subheadline)
                    Text("¥\(expenseData.reduce(0) { $0 + $1.value }, specifier: "%.0f")")
                        .font(.headline)
                }
            }
        }
        .chartLegend(position: .bottom)
        .frame(height: 300)
        .padding()
    }
}

关键说明 #

• SectorMark是构建饼图/环形图的核心组件，通过angle绑定数据值，控制扇形的角度占比
• innerRadius接受ratio类型参数，0为实心饼图，0~1之间的数值会形成环形
• foregroundStyle(by:)自动为不同类别分配差异化颜色，也可手动指定颜色数组
• annotation可用于添加自定义标注，适合在环形图中间展示汇总信息

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