如何为Apple Charts框架中的单个BarMark添加边框

嘿，我之前也纠结过这个问题！Apple Charts的BarMark本身并没有直接提供边框修饰符，不过有两种简单的方法可以实现单个条形的边框效果，我给你详细说说：

方法一：用overlay叠加描边形状（最简洁） #

直接给每个BarMark叠加一个描边的矩形，和条形的形状保持一致就行。这种方法代码少，逻辑清晰，适合大多数场景：

import Charts

Chart {
    ForEach(matchs, id: \.day) { match in
        BarMark(x: .value("day", match.day),
                y: .value("point", match.point)
        )
        .opacity(1.0)
        .foregroundStyle(.red)
        .clipShape(RoundedRectangle(cornerRadius: 0))
        // 添加这一行：叠加一个描边的矩形作为边框
        .overlay(
            RoundedRectangle(cornerRadius: 0) // 和BarMark的圆角保持一致
                .stroke(.black, lineWidth: 1) // 边框颜色和宽度
        )
    }
}
.chartPlotStyle { content in
    content.border(.white, width: 1)
}
.frame(height: 250)

如果之后你想给条形加圆角，只需要把cornerRadius的值同步修改就行，这样边框和条形的圆角会完全匹配，不会出现错位。

方法二：叠加两层BarMark（适合特殊视觉需求） #

如果需要更粗的边框，或者想要边框有特殊效果（比如阴影），可以画两层BarMark：底层作为边框（稍宽一点），上层作为实际的条形内容：

import Charts

Chart {
    ForEach(matchs, id: \.day) { match in
        // 底层：边框层，宽度比上层宽，颜色设为边框色
        BarMark(x: .value("day", match.day),
                y: .value("point", match.point)
        )
        .foregroundStyle(.black)
        .clipShape(RoundedRectangle(cornerRadius: 0))
        .width(20) // 边框层宽度

        // 上层：实际条形层，宽度比底层窄，露出边框
        BarMark(x: .value("day", match.day),
                y: .value("point", match.point)
        )
        .opacity(1.0)
        .foregroundStyle(.red)
        .clipShape(RoundedRectangle(cornerRadius: 0))
        .width(16) // 实际条形宽度，比边框层窄4px（左右各露出2px边框）
    }
}
.chartPlotStyle { content in
    content.border(.white, width: 1)
}
.frame(height: 250)

你可以通过调整两层的宽度差值来控制边框的粗细，非常灵活。

小提示 #

两种方法都可以根据你的需求调整颜色、圆角、宽度这些参数，选最适合你场景的就行～我自己平时用第一种方法更多，毕竟代码更简洁好维护。

备注：内容来源于stack exchange，提问作者Jameel