在AppleWatch中使用Charts图表【2】

1、前言

上一篇介绍了Charts在Watch中的基本使用，这一篇我们介绍个性化设置，使得图表更符合我们的实际需求和风格样式。

2、修改Y轴范围

还是使用上一篇的销售量示例，默认情况下Y轴范围会根据实际数据自动判断，如示例中Y轴范围为0-3000，假设需求是为了凸显销量目标为4000，期望Y轴的范围为0-4000，只需要添加一行代码

.chartYScale(domain: 0...4000)

完整代码为：

import SwiftUI
import Charts

struct ContentView: View {
    
    var body: some View {
        
        let gzData:[(day:Date,sales:Int)] = [
            (day:Util.getDate(offset:1),sales:1666),
            (day:Util.getDate(offset:2),sales:1899),
            (day:Util.getDate(offset:3),sales:1254),
            (day:Util.getDate(offset:4),sales:1200),
            (day:Util.getDate(offset:5),sales:983),
            (day:Util.getDate(offset:6),sales:1101),
            (day:Util.getDate(offset:7),sales:801),
        ]
        
        let szData:[(day:Date,sales:Int)] = [
            (day:Util.getDate(offset:1),sales:2287),
            (day:Util.getDate(offset:2),sales:1655),
            (day:Util.getDate(offset:3),sales:1598),
            (day:Util.getDate(offset:4),sales:1067),
            (day:Util.getDate(offset:5),sales:900),
            (day:Util.getDate(offset:6),sales:1201),
            (day:Util.getDate(offset:7),sales:540),
        ]
        
        let sericeData = [
            (city:"广州",data: gzData),
            (city:"深圳",data: szData)
        ]
        
        Chart {
            ForEach(sericeData,id: \.city) { serice in
                ForEach(serice.data,id: \.day) {
                    LineMark(
                        x: .value("日期", $0.day,unit: .day),
                        y: .value("销售量", $0.sales)
                    )
                }
                .symbol(.circle)
                .foregroundStyle(by: .value("City", serice.city))
            }
        }
        .chartYScale(domain: 0...4000)
    }
}

class Util {
    static func getDate(offset:Int) -> Date {
            let calendar = Calendar.current
            return calendar.date(byAdding: .day, value: -offset, to: Date()) ?? Date()
        }
}

运行效果：

修改Y轴

3、自定义数据颜色

上面的示例中，系统自动选择了蓝色和绿色来区分广州和深圳的数据，如果需求是用红色和绿色来表示广州和深圳，也只需要添加简单的代码：

        Chart {
            ...
        }
        .chartYScale(domain: 0...4000)
        .chartForegroundStyleScale([
            "广州": .red,
            "深圳": .green
        ])

修改颜色

3、深度自定义

图表区域可拆分为：

Axes：xy轴
Legend：图例
Plot Area：绘图区域

Axes和Legend

Plot Area

这三个部分都可以根据我们的需求进行自定义，我们先看下如果自定义轴和图例。先上原始代码：

import SwiftUI
import Charts

struct ContentView: View {
    
    var body: some View {
        
        let data = [
            (month:Util.getDateForMonth(month:1),dailyAverage:939),
            (month:Util.getDateForMonth(month:2),dailyAverage:879),
            (month:Util.getDateForMonth(month:3),dailyAverage:840),
            (month:Util.getDateForMonth(month:4),dailyAverage:823),
            (month:Util.getDateForMonth(month:5),dailyAverage:797),
            (month:Util.getDateForMonth(month:6),dailyAverage:800),
            (month:Util.getDateForMonth(month:7),dailyAverage:820),
            (month:Util.getDateForMonth(month:8),dailyAverage:834),
            (month:Util.getDateForMonth(month:9),dailyAverage:791),
            (month:Util.getDateForMonth(month:10),dailyAverage:801),
            (month:Util.getDateForMonth(month:11),dailyAverage:765),
            (month:Util.getDateForMonth(month:12),dailyAverage:489),
        ]

        Chart(data,id: \.month) {
            BarMark(
                x: .value("月", $0.month, unit: .month),
                y: .value("日均销量", $0.dailyAverage)
            )
        }
        
    }
}

class Util {
    static func getDateForMonth(month: Int, year: Int = Calendar.current.component(.year, from: Date())) -> Date {
        // 创建一个 DateComponents 对象
        var components = DateComponents()
        components.year = year
        components.month = month
        components.day = 1 // 设置为该月的第一天

        // 使用 Calendar 将 DateComponents 转换为 Date
        let calendar = Calendar.current
        return calendar.date(from: components) ?? Date()
    }
}

原始代码运行效果：

原始代码效果

Charts会自动生成X抽数据，我们希望能完整显示每个月，并且使用首字母作为月份标签，这时我们就可以使用.chartXAxis来实现自定义了，给Chart添加修饰器：

Chart(data,id: \.month) {
    //...
}
.chartXAxis{
    AxisMarks(values: .stride(by: .month))
}

显示所有月份

AxisMarks()如果不带参数，x轴创建的就是默认样式

此时虽然显示了所有月份，但是空间不够全部被压缩了，此时我们来完全自定义X轴样式：

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

显示所有月份首字母

尝试分别删除AxisGridLine()和AxisTick()，看它们分别代表什么？

其中参数值value为当前的轴的值，本例中为数据中month，类型为Date，此时我们可以根据Date的值，x轴只显示每个季度的首月：

.chartXAxis{
    AxisMarks(values: .stride(by: .month)) { value in
        if value.as(Date.self)!.isFirstMonthOfQuarter() {
            AxisGridLine().foregroundStyle(.white.opacity(0.3))
            AxisTick().foregroundStyle(.white.opacity(0.3))
            AxisValueLabel(
                format: .dateTime.year().quarter()
            )
        }else {
            AxisGridLine().foregroundStyle(.white.opacity(0.1))
        }
    }
}

其中isFirstMonthOfQuarter方法如下：

extension Date {
    func isFirstMonthOfQuarter() -> Bool {
        let calendar = Calendar.current
        let month = calendar.component(.month, from: self)
        return [1,4,7,10].contains(month)
    }
}

季度

我们再来看下Y轴，可以将Y轴移动到左边：

.chartYAxis() {
    AxisMarks(position: .leading)
}

Y轴前移

可以通过以下代码分别隐藏X轴、Y轴、图例：

.chartXAxis(.hidden)
.chartYAxis(.hidden)
.chartLegend(.hidden)

通过 .chartPlotStyle可以拿到绘制区域上下文，进行定制化：

.chartPlotStyle { ploatAr in
      return ploatAr
}

例如固定设置绘制区的高度为100，添加背景色和边框:

.chartPlotStyle { ploatAr in
    ploatAr
        .frame(height: 100)
        .background(.pink.opacity(0.2))
        .border(.pink,width: 1)
}

修改绘制区高度和颜色

这篇先介绍到这里，下一篇将举个🌰，将Charts应用到实际开发中。

在AppleWatch中使用Charts图表【2】