带有圆角的SwiftUI图表线

Question

我正在尝试制作一个带有圆角的图表，如下图所示。

我在路径中尝试了以下代码：

.stroke(style: StrokeStyle(lineWidth: 2, lineCap: .round))

和

.stroke(Color.accentColor, style: StrokeStyle(lineWidth: 2, lineJoin: .round))

似乎没有任何作用，这可能吗？我在这两行中尝试的任何选项总是以相同的方式显示图表（下图） 我正在使用 SwiftUI、Swift 5、iOS 15。提前致谢。

Answer 1

线宽为 2 时几乎看不到圆角，您看到的是一个半径为 1 点的圆。这两条线以 2 的线宽绘制，有或没有圆角连接：

这里的线宽为10：

如果你的线方向急剧改变，那么它上面就会有一个点，因为这就是你的数据的形状。您可以通过尝试笔划样式的斜接限制来切断点。如果您想平滑数据，那么您需要考虑某种插值，但这可能不合适，具体取决于您要建模的内容。有关示例，请参阅[此处]的“平滑插值”。 （https://developer.apple.com/documentation/accelerate/working_with_vectors）

Answer 2

您可以在

.interpolationMethod(.cardinal)

上使用

LineMark

。

示例：

Chart {
    ForEach(data, id: \.id) { item in
        LineMark(
            x: .value("Day", item.date),
            y: .value("Mood", item.value)
        ).lineStyle(.init(lineWidth: 6))
         .interpolationMethod(.cardinal)
     }
}