基本图表类型：LineMark、BarMark、PointMark

SwiftUI Charts 框架提供了多种内置的图表标记类型（Marks），用于快速构建常见的数据可视化图表。本章将详细介绍三种核心标记类型：LineMark（折线图）、BarMark（柱状图）和 PointMark（散点图），并通过代码示例展示它们的基本用法。

1. LineMark：折线图

LineMark 用于绘制连接数据点的折线，适合展示数据随时间或其他连续变量的变化趋势。

基本语法

import Charts

struct LineChartView: View {
    let data = [
        (month: "Jan", value: 50),
        (month: "Feb", value: 43),
        (month: "Mar", value: 61)
    ]

    var body: some View {
        Chart(data, id: \.month) { item in
            LineMark(
                x: .value("Month", item.month),
                y: .value("Value", item.value)
            )
        }
        .frame(height: 200)
    }
}

关键特性

  • 连接样式：通过 lineStyle 修饰符自定义线条颜色、宽度和虚线模式。
  • 数据点：可结合 PointMark 显示数据点。
  • 多线条：通过嵌套多个 LineMark 实现多组数据对比。

2. BarMark：柱状图

BarMark 用于绘制矩形柱体，适合比较不同类别的数值大小。

基本语法

struct BarChartView: View {
    let data = [
        (category: "A", value: 30),
        (category: "B", value: 55),
        (category: "C", value: 23)
    ]

    var body: some View {
        Chart(data, id: \.category) { item in
            BarMark(
                x: .value("Category", item.category),
                y: .value("Value", item.value)
            )
            .foregroundStyle(.blue) // 自定义颜色
        }
    }
}

关键特性

  • 堆叠柱状图：通过 position 参数实现堆叠效果。
  • 宽度调整：使用 width 修饰符控制柱体宽度。
  • 渐变填充：结合 LinearGradient 实现动态填充效果。

3. PointMark：散点图

PointMark 用于绘制离散的数据点，适合展示数据分布或相关性。

基本语法

struct ScatterPlotView: View {
    let data = [
        (x: 1.2, y: 3.5),
        (x: 2.8, y: 4.1),
        (x: 3.5, y: 2.7)
    ]

    var body: some View {
        Chart(data, id: \.x) { item in
            PointMark(
                x: .value("X", item.x),
                y: .value("Y", item.y)
            )
            .symbol(.circle) // 自定义形状
            .symbolSize(15)  // 控制大小
        }
    }
}

关键特性

  • 符号类型：支持 circle、square、triangle 等形状。
  • 动态交互：结合手势识别实现数据点高亮。
  • 多变量展示：通过 foregroundStyle 区分不同数据组。

综合案例：组合图表

将多种标记类型结合使用，创建更丰富的数据可视化效果。

struct CombinedChartView: View {
    let salesData = [
        (month: "Q1", revenue: 150, profit: 40),
        (month: "Q2", revenue: 220, profit: 80)
    ]

    var body: some View {
        Chart(salesData, id: \.month) { item in
            BarMark(
                x: .value("Quarter", item.month),
                y: .value("Revenue", item.revenue)
            )
            .foregroundStyle(.blue.opacity(0.3))
            
            LineMark(
                x: .value("Quarter", item.month),
                y: .value("Profit", item.profit)
            )
            .lineStyle(StrokeStyle(lineWidth: 3))
            
            PointMark(
                x: .value("Quarter", item.month),
                y: .value("Profit", item.profit)
            )
            .symbol(.diamond)
        }
    }
}

总结

标记类型适用场景核心修饰符
LineMark趋势分析lineStyle, interpolation
BarMark数值比较width, position
PointMark数据分布symbol, symbolSize

通过灵活组合这些标记类型，可以覆盖大多数基础数据可视化需求。在后续章节中，我们将进一步探索如何自定义这些图表的样式和交互行为。

Last Updated::