SwiftUI Chart绘制时如何跳过零值且保留完整X轴月份标签

核心思路 #

不要过滤零值对应的月份数据，而是保留所有需要展示的月份条目，仅在绘制时隐藏零值的点，以此保证X轴显示全部月份标签。

具体实现步骤 #

1. 优化数据结构（可选，逻辑更清晰） #

将maxWeight改为可选类型，明确区分有有效数据和无数据的情况：

struct BestWeights: Identifiable {
    let id = UUID()
    let date: String
    let maxWeight: Int? // 无有效数据时设为nil
}

2. 生成完整的月份数据数组 #

确保数组包含所有目标月份，零值月份存入nil而非直接过滤：

private var bestWeights: [BestWeights] {
    var weightsArray = [BestWeights]()
    var currentDate = selectedDate
    // 示例：生成最近6个月的数据，可按需调整月份数量
    for _ in 0..<6 {
        let monthComponent = Calendar.current.component(.month, from: currentDate)
        let monthName = String(DateFormatter().monthSymbols[monthComponent - 1].prefix(3))
        // 非零值存实际重量，零值存nil
        let weightValue = bestWeightOfPeriod != 0 ? bestWeightOfPeriod : nil
        weightsArray.append(BestWeights(date: monthName, maxWeight: weightValue))
        // 向前推移一个月
        currentDate = Calendar.current.date(byAdding: .month, value: -1, to: currentDate) ?? currentDate
    }
    return weightsArray
}

3. 绘制图表：保留X轴，隐藏零值点 #

通过条件判断仅渲染有有效数据的圆点，同时依托完整数据数组生成全量X轴标签：

Chart {
    ForEach(bestWeights) { item in
        // 绘制折线，零值条目用0占位但不显示点
        LineMark(
            x: .value("Month", item.date),
            y: .value("Max Weight", item.maxWeight ?? 0)
        )
        // 仅当有有效重量时，显示圆点标记
        if let weight = item.maxWeight {
            PointMark(
                x: .value("Month", item.date),
                y: .value("Max Weight", weight)
            )
            .symbol {
                Circle()
                    .fill(.blue)
                    .frame(width: 7, height: 7)
            }
        }
    }
}
// 可选：自定义X轴样式，确保标签完整显示
.chartXAxis {
    AxisMarks(position: .bottom) { value in
        AxisLabel(content: {
            Text(value.as(String.self) ?? "")
        })
    }
}
// 可选：设置Y轴范围，避免零值干扰刻度（若有效数据远大于0）
.chartYScale(domain: 50...(bestWeights.compactMap(\.maxWeight).max() ?? 100))

关键说明 #

• 必须保留所有月份的数据条目，才能让Chart生成完整的X轴标签。
• 用可选类型区分有效数据和零值，比直接存0更清晰，也能避免零值拉低Y轴刻度。
• 若需要断开零值处的折线，可给LineMark添加.interpolationMethod(.stepStart)调整折线连接逻辑。

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