Swift Charts堆叠BarMark胶囊形状实现及轴标签缺失问题

一、堆叠柱状图胶囊形状实现问题 #

你尝试给堆叠的BarMark应用clipShape时，形状仅作用于单个堆叠项而非整个柱状图，直接使用cornerRadius也只能实现顶部圆角，无法得到完整的胶囊形状。

解决方法：使用PlotGroup分组堆叠项并裁剪 #

将同一日期下的所有堆叠BarMark放入PlotGroup中，再对整个分组应用clipShape(Capsule())，这样裁剪会作用于整个堆叠柱状图而非单个项。修改后的代码如下：

@ViewBuilder var barChart: some View {
    Chart {
        ForEach(dates, id: \.self) { date in
            let incomeSummary = incomeSummaries.first(where: { $0.date?.inSameDay(as: date) == true })
            
            // 用PlotGroup分组同一日期的堆叠项
            PlotGroup(id: "StackedBar") {
                ForEach(Value.allCases, id: \.self) { value in
                    barMark(for: value, date: date, incomeSummary: incomeSummary)
                        .foregroundStyle(value.color)
                }
            }
            .clipShape(Capsule()) // 对整个分组应用胶囊形状裁剪
        }
    }
    .chartXAxis {
        AxisMarks(values: dates) { date in
            AxisValueLabel(format: .dateTime.weekday(), centered: true)
        }
    }
    .chartYAxis {
        AxisMarks { mark in
            AxisValueLabel()
        }
    }
}

二、X轴最后一个标签丢失问题 #

设置AxisValueLabel(centered: true)后最后一个标签消失，这通常是布局边界导致的标签被截断，并非bug，可以通过以下方式修复：

方法1：扩展X轴刻度范围 #

给X轴的刻度范围增加一点额外空间，确保最后一个标签能显示：

.chartXScale(domain: dates.first!...dates.last!.addingTimeInterval(86400)) // 给最后一天追加24小时的范围

方法2：调整标签偏移量 #

通过offset微调标签位置，避免被边界截断：

AxisValueLabel(format: .dateTime.weekday(), centered: true)
    .offset(x: -6) // 根据实际布局调整偏移数值

方法3：检查数据完整性 #

确认dates数组的最后一个日期存在对应的incomeSummary数据，空数据可能导致柱状图不渲染，进而标签不显示。

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