SwiftUI Charts如何移除股票数据中的周末间隙？

使用SwiftUI Charts的LineMark展示股票数据时，已经通过代码过滤掉了周末的数据（原始数据本身也没有周末记录），但图表上仍存在周末的间隙。X轴为Date类型，Y轴为Double类型，请问如何移除这些间隙？

解决方案 #

方法1：将X轴改为类别轴（推荐） #

SwiftUI Charts的Date类型X轴默认是连续时间轴，即使数据缺失，也会按实际时间间隔留空。改用数据点的索引作为X轴的类别值，就能让所有数据点紧密排列，彻底消除间隙。

修改后的图表代码：

Chart(Array(historicalData.enumerated()), id: \.element.date) { index, dataPoint in
    LineMark(
        x: .value("Time", index), // 用数据点的索引替代原始Date
        y: .value("Close", dataPoint.priceClose)
    )
}
// 可选：自定义X轴标签，显示对应日期
.chartXAxis {
    AxisMarks(position: .bottom) { value in
        if let index = value.as(Int.self), index < historicalData.count {
            let date = historicalData[index].date
            AxisGridLine()
            AxisTick()
            AxisLabel(content: {
                // 格式化日期显示，可根据需求调整
                Text(date.formatted(date: .abbreviated, time: .omitted))
                    .rotationEffect(.degrees(45))
            })
        }
    }
}
.chartYScale(domain: lowY...highY)
.frame(height: height)

方法2：自定义连续轴的显示刻度 #

如果需要保留Date类型的X轴逻辑，仅隐藏无数据的周末刻度，可以通过自定义轴标记实现，但这种方法无法完全消除轴上的间隙，只是隐藏了空白刻度：

Chart(historicalData, id: \.date){
    LineMark(
        x: .value("Time", $0.date),
        y: .value("Close", $0.priceClose)
    )
}
.chartXAxis {
    AxisMarks(position: .bottom) { value in
        // 只在有对应数据点时显示刻度和标签
        if let date = value.as(Date.self), 
           historicalData.contains(where: { $0.date == date }) {
            AxisGridLine()
            AxisTick()
            AxisLabel(content: {
                Text(date.formatted(date: .abbreviated, time: .omitted))
                    .rotationEffect(.degrees(45))
            })
        }
    }
}
.chartYScale(domain: lowY...highY)
.frame(height: height)

注：方法1是解决间隙问题最直接有效的方案，因为它从根本上改变了X轴的渲染逻辑，不再依赖连续时间间隔。

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