SwiftUI Charts Y轴设为数据最小值的配置问题

问题场景 #

使用SwiftUI的Chart和AreaMark展示股票价格数据，所有数据的最低值不低于120，但Y轴始终从0开始显示（刻度为150、100、50）。尝试使用.chartYScale(domain: .automatic(includesZero: false))配置无效，手动设置固定域范围又会出现苹果开发者论坛提及的显示异常问题。

可能原因 #

1. X轴数据类型问题：如果X轴使用字符串类型的时间戳，Chart可能无法正确识别数据分布，导致Y轴域计算异常。
2. API参数适配问题：.automatic(includesZero: false)在部分场景下优先级低于默认的域计算逻辑，改用.data(includesZero: false)可能更有效。

解决方案 #

方案1：转换X轴数据为Date类型 #

将字符串时间戳转为Date类型，让Chart能正确识别数据序列，从而准确计算Y轴域：

// 给String添加日期转换扩展
extension String {
    func toChartDate() -> Date {
        let formatter = DateFormatter()
        formatter.dateFormat = "yyyy-MM-dd HH:mm:ss"
        formatter.locale = Locale(identifier: "en_US_POSIX")
        return formatter.date(from: self) ?? Date()
    }
}

// 定义数据结构
struct StockPrice {
    let timestamp: String
    let price: Double
}

// 原始数据
let stockPrices = [
    StockPrice(timestamp: "2024-04-01 09:30:00", price: 132.70),
    StockPrice(timestamp: "2024-04-02 09:30:00", price: 126.10),
    StockPrice(timestamp: "2024-04-03 09:30:00", price: 140.60)
]

// 转换为带Date的数据集
let chartData = stockPrices.map {
    (date: $0.timestamp.toChartDate(), price: $0.price)
}

// 渲染图表
Chart(chartData) { item in
    AreaMark(
        x: .value("日期", item.date),
        y: .value("价格", item.price)
    )
}
.chartYScale(domain: .data(includesZero: false))

方案2：优化手动域设置 #

如果必须手动设置Y轴域，给最小最大值添加少量缓冲，避免出现显示异常：

// 计算数据极值并添加1%缓冲
let minPrice = stockPrices.map(\.price).min() ?? 120
let maxPrice = stockPrices.map(\.price).max() ?? 140
let adjustedMin = minPrice * 0.99
let adjustedMax = maxPrice * 1.01

Chart(stockPrices) {
    AreaMark(
        x: .value("日期", $0.timestamp.toChartDate()),
        y: .value("价格", $0.price)
    )
}
.chartYScale(domain: adjustedMin...adjustedMax)

注意事项 #

• 确保项目部署目标为iOS 16.0+/macOS 13.0+，SwiftUI Chart API仅在这些版本及以上可用。
• 使用.data(includesZero: false)而非.automatic(includesZero: false)，前者更侧重基于实际数据计算域范围。

内容的提问来源于stack exchange，提问作者peter flanagan