Charts 框架的核心组件（Chart、Mark、Axis）

概述

SwiftUI Charts 框架（iOS 16+）提供了三个核心组件来构建数据可视化图表：

  1. Chart - 图表容器和坐标系系统
  2. Mark - 数据的具体可视化表现形式
  3. Axis - 坐标轴和刻度系统

1. Chart 容器

基本语法

Chart {
    // 在这里添加 Marks
}

核心功能

  • 自动处理坐标系和布局
  • 支持多种 Mark 类型的组合
  • 内置响应式设计（自动适应 Dark Mode 和动态类型）

示例：基础容器

Chart(data) { item in
    // 数据标记将在这里添加
}
.frame(height: 300)
.padding()

2. Mark 类型体系

主要 Mark 类型

Mark 类型用途示例
BarMark柱状图/条形图销售数据对比
LineMark折线图股票价格趋势
PointMark散点图相关性分析
AreaMark面积图累积数据可视化
RuleMark参考线平均值/阈值线

Mark 的通用属性

BarMark(
    x: .value("Date", item.date),
    y: .value("Sales", item.sales)
)
.foregroundStyle(by: .value("Category", item.category))
.symbol(by: .value("Status", item.status))

3. Axis 坐标轴系统

轴类型

  • X 轴：.chartXAxis
  • Y 轴：.chartYAxis

自定义轴示例

.chartXAxis {
    AxisMarks(values: .stride(by: .month)) { value in
        AxisGridLine()
        AxisTick()
        AxisValueLabel(format: .dateTime.month(.abbreviated))
    }
}

高级轴配置

.chartYAxis {
    AxisMarks(
        position: .leading,
        values: yValues
    ) { value in
        AxisGridLine()
        AxisTick(stroke: StrokeStyle(lineWidth: 2))
        AxisValueLabel {
            Text("\(value.as(Int.self)!)")
                .font(.caption2)
        }
    }
}

组件协作关系

graph TD
    A[Chart] --> B[Mark]
    A --> C[Axis]
    B --> D[BarMark]
    B --> E[LineMark]
    C --> F[XAxis]
    C --> G[YAxis]

最佳实践

  1. 组合使用 Marks：可以在单个 Chart 中混合多种 Mark 类型

    Chart {
    BarMark(...)
    LineMark(...)
}

  2. 轴同步：当使用双 Y 轴时确保比例协调

    .chartYAxis {
    AxisMarks(position: .leading)  // 左轴
    AxisMarks(position: .trailing) // 右轴
}

  3. 语义化数据：始终为值提供清晰的描述

    .value("销售额", amount)  // 而非 .value("", amount)

常见问题解决方案

Q：如何隐藏特定轴？

.chartXAxis(.hidden)

Q：如何自定义 Mark 的堆叠方式？

BarMark(...)
.position(by: .value("Stack", stackType))

Q：如何处理空数据？

Chart {
    if !data.isEmpty {
        ForEach(data) { item in
            LineMark(...)
        }
    } else {
        RuleMark(y: .value("Placeholder", 0))
            .annotation {
                Text("暂无数据")
            }
    }
}

提示：所有 Mark 类型都遵循相同的修饰符体系，学会一种即可触类旁通

Last Updated::