案例：创建带有渐变填充的柱状图

概述

本案例将演示如何使用 SwiftUI Charts 框架创建一个带有渐变填充效果的柱状图。渐变填充可以增强图表的视觉吸引力，同时帮助用户更直观地理解数据的变化趋势。

实现步骤

1. 准备数据模型

struct SalesData: Identifiable {
    let id = UUID()
    let month: String
    let revenue: Double
}

let sampleData = [
    SalesData(month: "Jan", revenue: 5000),
    SalesData(month: "Feb", revenue: 8000),
    SalesData(month: "Mar", revenue: 12000),
    SalesData(month: "Apr", revenue: 6000),
    SalesData(month: "May", revenue: 9000)
]

2. 创建基本柱状图

import Charts
import SwiftUI

struct BasicBarChart: View {
    var data: [SalesData]
    
    var body: some View {
        Chart(data) {
            BarMark(
                x: .value("Month", $0.month),
                y: .value("Revenue", $0.revenue)
            )
        }
        .frame(height: 300)
        .padding()
    }
}

3. 添加渐变填充

struct GradientBarChart: View {
    var data: [SalesData]
    let gradient = LinearGradient(
        gradient: Gradient(colors: [.blue, .purple]),
        startPoint: .bottom,
        endPoint: .top
    )
    
    var body: some View {
        Chart(data) {
            BarMark(
                x: .value("Month", $0.month),
                y: .value("Revenue", $0.revenue)
            )
            .foregroundStyle(gradient)
        }
        .frame(height: 300)
        .padding()
    }
}

4. 添加高级样式

struct StyledGradientBarChart: View {
    var data: [SalesData]
    let gradient = LinearGradient(
        gradient: Gradient(colors: [.blue.opacity(0.3), .purple]),
        startPoint: .bottom,
        endPoint: .top
    )
    
    var body: some View {
        Chart(data) {
            BarMark(
                x: .value("Month", $0.month),
                y: .value("Revenue", $0.revenue)
            )
            .foregroundStyle(gradient)
            .cornerRadius(6) // 圆角效果
        }
        .chartXAxis {
            AxisMarks(values: .automatic) { value in
                AxisGridLine()
                AxisTick()
                AxisValueLabel()
            }
        }
        .chartYAxis {
            AxisMarks(position: .leading) // Y轴移到左侧
        }
        .frame(height: 300)
        .padding()
        .background(Color(.systemBackground))
        .cornerRadius(12)
        .shadow(radius: 5)
    }
}

关键知识点

  1. 渐变创建:

    • 使用 LinearGradient 创建线性渐变
    • 可以调整颜色、透明度和方向

  2. 样式修饰:

    • foregroundStyle 应用渐变
    • cornerRadius 为柱状图添加圆角
    • 背景和阴影增强卡片效果

  3. 轴定制:

    • 使用 chartXAxis 和 chartYAxis 修改器
    • 控制刻度线、网格线和标签位置

进阶技巧

  1. 条件渐变: 根据数据值动态改变渐变颜色:

    .foregroundStyle(by: .value("Revenue", $0.revenue)) {
    if $0 < 7000 {
        return LinearGradient(colors: [.red, .orange], startPoint: .bottom, endPoint: .top)
    } else {
        return LinearGradient(colors: [.green, .mint], startPoint: .bottom, endPoint: .top)
    }
}

  2. 动画效果:

    .animation(.easeInOut(duration: 1.0), value: data)

完整示例代码

import Charts
import SwiftUI

struct GradientBarChartExample: View {
    @State private var data = [
        SalesData(month: "Jan", revenue: 5000),
        SalesData(month: "Feb", revenue: 8000),
        SalesData(month: "Mar", revenue: 12000),
        SalesData(month: "Apr", revenue: 6000),
        SalesData(month: "May", revenue: 9000)
    ]
    
    let gradient = LinearGradient(
        gradient: Gradient(colors: [.blue.opacity(0.3), .purple]),
        startPoint: .bottom,
        endPoint: .top
    )
    
    var body: some View {
        VStack {
            Text("月度营收报告")
                .font(.title.bold())
            
            Chart(data) {
                BarMark(
                    x: .value("Month", $0.month),
                    y: .value("Revenue", $0.revenue)
                )
                .foregroundStyle(gradient)
                .cornerRadius(6)
            }
            .chartXAxis {
                AxisMarks(values: .automatic) { value in
                    AxisGridLine()
                    AxisTick()
                    AxisValueLabel()
                }
            }
            .chartYAxis {
                AxisMarks(position: .leading)
            }
            .frame(height: 300)
            .padding()
            
            Button("随机更新数据") {
                withAnimation {
                    data = data.map {
                        SalesData(month: $0.month, 
                                revenue: Double.random(in: 3000...15000))
                    }
                }
            }
            .buttonStyle(.borderedProminent)
        }
        .padding()
    }
}

总结

通过本案例，您已经学会了如何:

  • 创建基本的柱状图
  • 应用线性渐变填充
  • 自定义图表样式和布局
  • 添加交互式动画效果

这种带有渐变填充的柱状图特别适合展示财务数据、销售报告等需要突出数据变化的场景。

Last Updated::