SwiftUI 图表注释问题

Question

我正在探索 swiftui 图表，日期在 X 轴上，浮动在 Y 轴上。我正在关注一些视频和指南，但没有一个遇到我的问题。 问题是当点击条形图边缘情况时，当注释不适合框架并且它开始移动不正确的条形时。检查 gif 即可看到。欢迎您的帮助:)

    struct BarChartView: View {
        struct BarData: Identifiable, Equatable {
            var type: String
            var date: Date
            var count: Float
            var id: Int
        }
        
    var data: [BarData] = [BarData(type: "test1", date: Date(), count: 10.0, id: 1)
//and more]

    @State var activeItem: BarData?
    var body: some View {
        NavigationStack{
            VStack(alignment : .leading, spacing: 15) {
                Text("testing errors")
                VStack{
                    Chart(data) { item in
                        BarMark(
                            x: .value("Date",  item.date, unit: .day),
                            y: .value("Sum", item.count )
                        )
                        if let activeItem,activeItem.id == item.id{
                            RuleMark(x: .value("Day", activeItem.date))
                                .lineStyle(.init(lineWidth: 2, miterLimit: 2, dash: [2], dashPhase: 5))
                            
                                .annotation(position: .top){
                                    VStack(alignment: .leading, spacing: 6){
                                        HStack{
                                            Text("Type")
                                                .font(.caption)
                                                .foregroundColor(.gray)
                                            
                                            Text(activeItem.type)
                                                .font(.title3.bold())
                                        }
                                        HStack{
                                            Text("Sum")
                                                .font(.caption)
                                                .foregroundColor(.gray)
                                            Text("\(activeItem.count, specifier: "%.2f")")
                                                .font(.title3.bold())
                                        }
                                    }
                                    .padding(.horizontal, 10)
                                    .padding(.vertical, 4)
                                    .background(RoundedRectangle(cornerRadius: 6, style: .continuous)
                                        .fill(.black.shadow(.drop(radius: 2))))
                                }
                        }
                    }
                    .chartOverlay { 
// getting activeItem
                    }
                    .chartYScale(domain: 0...50)
                    .frame(height: 250)
                }
                .padding()
                .background{
                    RoundedRectangle(cornerRadius: 10, style: .continuous)
                        .stroke(.gray, lineWidth: 1)
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
            .padding(.top, 10)
            .navigationTitle("Test charts")
        }
    }
}

Answer 1

您可以将注释放在垂直线的不同侧，具体取决于活动项目在数据数组中的位置。

一个简单的实现是，当活动项目位于图表左侧时，将其放在线条的右侧；当活动项目位于图表右侧时，将其放在线条的左侧。

var annotationPosition: AnnotationPosition {
    guard let activeItem else { return .automatic }
    if let index = data.firstIndex(of: activeItem), index < data.count / 2 {
        return .topTrailing
    } else {
        return .topLeading
    }
}

.annotation(position: annotationPosition) { ... }

您还可以添加使中间数据（无论“中间”在哪里）的注释具有

.top

位置。