Swift Charts中LineMark缺失值显示为0的实现方法

目前SwiftUI Charts没有提供直接的修饰符来实现「缺失数据点时y值自动降为0」的效果，必须通过手动补全缺失数据点的方式来实现。

具体实现步骤 #

1. 确定x轴的完整取值范围：从现有数据的最小x值到最大x值，生成该范围内所有连续的x节点（如果是数值类型）；如果是时间类型（如Date），则按指定时间间隔（天/小时/分钟等）生成完整时间序列。
2. 将原始数据转换为键值对结构（如字典），方便快速查询对应x值的y值。
3. 遍历完整的x节点序列，为每个x节点匹配y值：原始数据存在则用原始值，不存在则设为0。
4. 使用补全后的完整数据绘制LineMark。

代码示例（数值类型x轴） #

import Charts
import SwiftUI

struct ChartExample: View {
    let originalData: [(x: Int, y: Int)] = [(0, 1), (1, 3), (5, 1), (10, 1)]
    
    // 补全缺失数据点的计算属性
    private var fullData: [(x: Int, y: Int)] {
        guard let minX = originalData.map(\.x).min(), let maxX = originalData.map(\.x).max() else {
            return originalData
        }
        // 生成从minX到maxX的所有整数x值
        let allXValues = Array(minX...maxX)
        // 转成字典方便查找
        let dataDict = Dictionary(uniqueKeysWithValues: originalData.map { ($0.x, $0.y) })
        // 生成完整数据，缺失的y值设为0
        return allXValues.map { x in
            (x: x, y: dataDict[x] ?? 0)
        }
    }
    
    var body: some View {
        Chart {
            ForEach(fullData, id: \.x) { point in
                LineMark(x: .value("x", point.x), y: .value("y", point.y))
            }
        }.padding()
    }
}

#Preview {
    ChartExample()
}

扩展：时间类型x轴的处理 #

如果x轴是Date类型，需要根据时间跨度生成完整序列，比如按天生成：

// 示例：按天补全时间序列
private func generateFullDateSequence(from startDate: Date, to endDate: Date) -> [Date] {
    var dates = [Date]()
    var currentDate = startDate
    while currentDate <= endDate {
        dates.append(currentDate)
        // 按天递增，可替换为小时/分钟等
        currentDate = Calendar.current.date(byAdding: .day, value: 1, to: currentDate)!
    }
    return dates
}

之后同样通过字典匹配原始数据，缺失的y值设为0即可。

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