如何在 SwiftCharts 中的 BarMark 周围添加边框？

Question

我正在使用 SwiftCharts 并使用 BarMark 显示条形图来可视化数据点。但是，我想在每个条形周围添加可见的边框或轮廓，以使它们更加突出。我成功地在整个图表周围添加了边框，但是如何为 SwiftCharts 中的每个单独的条添加边框？

这是我的上下文代码的简化版本：

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))
    }
}
.chartPlotStyle { content incontent.border(.white, width: 1)}
.frame(height: 250)

Answer 1

要在每个

BarMark

周围添加边框，您可以在每个栏上使用注释。在此

annotation

中，绘制一个与条形大小相匹配的

Rectangle

，然后对其应用

stroke

以创建边框。

您可以像这样更新代码：

Chart {
    ForEach(matchs, id: \.day) { match in
        BarMark(
            x: .value("day", match.day),
            y: .value("point", match.point)
        )
        .foregroundStyle(.red)
        .annotation(position: .overlay) {
            Rectangle()
                .stroke(Color.black, lineWidth: 1)
        }
    }
}
.frame(height: 250)

这样，您将在每个条形周围添加黑色边框。