常见的图表类型（折线图、柱状图、饼图、散点图等）

概述

图表是数据可视化的核心工具，通过图形化方式呈现数据关系。SwiftUI 支持多种标准图表类型，每种类型适用于不同的数据分析场景。本章将介绍 iOS 开发中最常用的图表类型及其适用场景。

1. 折线图 (Line Chart)

特点

  • 用连续的线段连接数据点
  • 显示数据随时间或有序类别的趋势变化
  • 支持多组数据对比（通过不同颜色/线型）

适用场景

  • 股票价格走势
  • 温度变化记录
  • 用户增长趋势分析

SwiftUI 实现示例

Chart {
    ForEach(data) { item in
        LineMark(
            x: .value("Date", item.date),
            y: .value("Value", item.value)
        )
        .foregroundStyle(by: .value("Category", item.category))
    }
}

2. 柱状图 (Bar Chart)

类型变体

  • 垂直柱状图（常规）
  • 水平柱状图
  • 堆叠柱状图（显示部分与整体关系）
  • 分组柱状图（多数据系列对比）

适用场景

  • 不同类别的数值比较（如月度销售额）
  • 离散数据的分布情况
  • 进度/完成度可视化

SwiftUI 实现要点

Chart {
    ForEach(data) { item in
        BarMark(
            x: .value("Category", item.name),
            y: .value("Value", item.score)
        )
        .annotation(position: .top) {
            Text("\(item.score)")
        }
    }
}
.frame(height: 300)

3. 饼图 (Pie Chart) / 环形图 (Donut Chart)

特点

  • 用扇形面积表示比例关系
  • 环形图中心可显示汇总数据
  • 适合展示不超过7个类别的数据

适用场景

  • 市场份额分布
  • 预算分配比例
  • 调查结果统计

注意事项

  • 需要确保各部分组成有效整体（总和应为100%）
  • 避免使用过多细分类别（会导致可读性下降）

SwiftUI 实现技巧

Chart {
    ForEach(budgetData) { item in
        SectorMark(
            angle: .value("Amount", item.amount),
            innerRadius: .ratio(0.6), // 设为0时是饼图
            outerRadius: .inset(10)
        )
        .foregroundStyle(by: .value("Category", item.name))
    }
}
.chartLegend(position: .trailing)

4. 散点图 (Scatter Plot)

特点

  • 用点表示二维数据坐标
  • 可显示数据集群和异常值
  • 常配合回归线使用

适用场景

  • 相关性分析（如身高体重关系）
  • 科学实验数据分布
  • 聚类分析可视化

SwiftUI 扩展功能

Chart {
    ForEach(experimentData) { item in
        PointMark(
            x: .value("Temperature", item.temp),
            y: .value("Result", item.result)
        )
        .symbol(by: .value("Group", item.group))
        .symbolSize(100)
    }
}

5. 其他专业图表类型

图表类型用途SwiftUI 支持
面积图趋势+累积量AreaMark
雷达图多维数据对比需自定义绘制
热力图密度/频率分布RectangleMark + 颜色梯度
箱线图统计分布特征需组合多种 Mark

选择图表类型的原则

  1. 数据维度：单变量/多变量？离散/连续？
  2. 展示目的：比较/分布/趋势/组成？
  3. 受众体验：是否需要交互？移动端显示限制？
  4. 数据规模：大数据集需考虑性能优化

提示：苹果 Human Interface Guidelines 建议在 iOS 上优先使用简单直观的图表类型，复杂可视化建议在 iPad 或 macOS 上实现

练习建议

尝试用 SwiftUI Charts 框架实现：

  1. 展示过去7天步数变化的折线图
  2. 比较三个产品季度销售额的堆叠柱状图
  3. 显示个人月度开支比例的环形图
Last Updated::