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应用到实际开发中。
