SwiftUI 图表 - 仅在绘制线下方显示 RuleMark

Question

我在使用 Swift 图表时遇到一些问题。我有以下

Chart

其中有

RuleMark

。正如您从下面的屏幕截图中看到的，

RuleMark

延长了屏幕的长度。我试图只显示线下方的标记。类似“这个问题”的问题正在问。如果需要进一步澄清，请告诉我。代码如下。

struct Item: Identifiable {
    var date: String
    var count: Double
    var id = UUID()
}

var data: [Item] = [
    .init(date: "10AM", count: 5),
    .init(date: "12AM", count: 4),
    .init(date: "2PM", count: 7),
    .init(date: "4PM", count: 2),
    .init(date: "6PM", count: 9)
]

struct ContentView: View {
    
    @State private var showingConfirmation = false
    @State private var backgroundColor = Color.white
    
    @State private var blurAmount = 0.0
    @State private var image: Image?
    
    var body: some View {
        Chart(data) { item in
            
            LineMark(
                x: .value("Date", item.date),
                y: .value("Value", item.count)
            )
            
            PointMark(
                x: .value("Date", item.date),
                y: .value("Value", item.count)
            )
            
            RuleMark(
                x: .value("Value", item.date)
            )
        }
        .chartYAxis(.hidden)
    }
}

Answer 1

RuleMark(
    x: .value("Date", item.date),
    yStart: .value("Bottom", 0),
    yEnd: .value("Value", item.count)
)

如果图的底部不是 y=0，您可以使用 

chartBackground

/

chartOverlay

来绘制带有

Path

的线：

.chartBackground { proxy in
    if let frameAnchor = proxy.plotFrame {
        GeometryReader { geo in
            let frame = geo[frameAnchor]
            ForEach(data) { item in
                if let point = proxy.position(for: (x: item.date, y: item.count)) {
                    Path { p in
                        p.move(to: .init(x: point.x + frame.minX, y: point.y + frame.minY))
                        p.addLine(to: .init(x: point.x + frame.minX, y: frame.maxY))
                    }
                    .stroke(.blue, lineWidth: 1)
                }
            }
        }
    }
}