案例：构建简单的折线图和柱状图

概述

本节将通过两个完整的案例，演示如何使用 SwiftUI Charts 框架快速构建折线图和柱状图。我们将从数据准备开始，逐步实现图表的布局、样式和交互功能。

1. 折线图案例：月度气温变化

数据模型

struct TemperatureData: Identifiable {
    let id = UUID()
    let month: String
    let temperature: Double
}

let monthlyTemperatures = [
    TemperatureData(month: "Jan", temperature: 5.2),
    TemperatureData(month: "Feb", temperature: 6.8),
    // ...其他月份数据
]

基础折线图实现

import Charts

struct LineChartView: View {
    var body: some View {
        Chart(monthlyTemperatures) {
            LineMark(
                x: .value("Month", $0.month),
                y: .value("Temp", $0.temperature)
            )
        }
        .chartXAxis {
            AxisMarks(values: .automatic) { value in
                AxisGridLine()
                AxisTick()
                AxisValueLabel()
            }
        }
        .frame(height: 300)
        .padding()
    }
}

关键点说明

  1. LineMark 是折线图的核心标记类型
  2. x 和 y 参数使用 value(_:,_:) 方法绑定数据
  3. chartXAxis 修饰符自定义X轴显示

2. 柱状图案例：产品销售数据

数据模型

struct ProductSales: Identifiable {
    let id = UUID()
    let product: String
    let sales: Int
}

let salesData = [
    ProductSales(product: "iPhone", sales: 1200),
    ProductSales(product: "iPad", sales: 800),
    // ...其他产品数据
]

基础柱状图实现

struct BarChartView: View {
    var body: some View {
        Chart(salesData) {
            BarMark(
                x: .value("Product", $0.product),
                y: .value("Sales", $0.sales)
            )
            .foregroundStyle(by: .value("Product", $0.product))
        }
        .chartLegend(position: .top)
        .frame(height: 300)
        .padding()
    }
}

关键点说明

  1. BarMark 是柱状图的核心标记类型
  2. foregroundStyle 修饰符实现不同产品的颜色区分
  3. chartLegend 添加图例说明

3. 组合使用技巧

添加多个数据系列

Chart {
    ForEach(dataSeries) { series in
        LineMark(
            x: .value("Day", series.day),
            y: .value("Value", series.value)
        )
        .foregroundStyle(by: .value("Series", series.name))
    }
}

添加交互功能

Chart(salesData) { item in
    BarMark(...)
        .annotation {
            Text("\(item.sales)")
                .font(.caption)
        }
}

4. 常见问题解决

问题1：数据点不显示

  • 检查数据模型是否遵循 Identifiable 协议
  • 确认数值范围是否合理（避免0值或过大值）

问题2：轴标签重叠

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

问题3：性能问题

  • 对于大数据集，考虑使用 ChartProxy 进行数据采样
  • 启用 drawingGroup() 提升渲染性能

5. 练习任务

  1. 扩展折线图案例，添加第二条温度数据线（如去年同期的温度）
  2. 为柱状图添加点击交互，显示具体数值
  3. 尝试将两种图表类型组合在一个 Chart 视图中
// 组合图表示例
Chart {
    LineMark(...)  // 折线
    BarMark(...)   // 柱状
}

总结

通过这两个基础案例，我们掌握了：

  • 使用 LineMark 和 BarMark 创建基本图表
  • 数据与图表的绑定方法
  • 基本的样式自定义技巧
  • 简单的交互实现方法

这些基础图表可以满足80%的常见数据可视化需求，后续章节将深入更复杂的定制功能。

Last Updated::