如何为暂无数据的Swift Chart添加占位提示？

目前Swift Charts官方并未提供专门的API直接显示“暂无数据”类的占位提示，最实用的实现方式就是根据数据源是否为空，切换显示占位视图或图表，也就是你提到的隐藏图表、展示文本的思路。

示例代码 #

import SwiftUI
import Charts

struct TopStyleChart: View {
    // 模拟可能为空的数据源
    let data: [(name: String, sales: Int)] = []

    var body: some View {
        if data.isEmpty {
            // 自定义暂无数据占位视图
            VStack(spacing: 12) {
                Image(systemName: "chart.bar.doc.horizontal")
                    .font(.title)
                    .foregroundColor(.gray)
                Text("暂无数据")
                    .font(.headline)
                    .foregroundColor(.secondary)
            }
            .frame(height: 300) // 固定高度，和图表保持一致，避免布局跳动
        } else {
            Chart(data, id: \.name) {
                BarMark(
                    x: .value("销售额", $0.sales),
                    y: .value("名称", $0.name)
                )
                .foregroundStyle(.pink)
                .accessibilityLabel($0.name)
                .accessibilityValue("已售出\($0.sales)份")
            }
        }
    }
}

补充说明 #

• 这种基于if-else的视图切换完全符合SwiftUI的声明式逻辑，实现简洁且易维护。
• 你可以根据需求自定义占位视图的样式，比如调整图标、文本样式，甚至添加按钮触发数据刷新。
• 给占位视图设置固定高度，能保证数据状态切换时页面布局稳定，不会出现跳动。

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