SwiftUI Charts：如何为选中/最后一个BarMark添加指示线

你当前的代码已经实现了选中元素的逻辑，但缺少指示线的绘制代码——chartOverlay里只处理了手势，没有把选中状态转化为可视化的线条。下面是两种可行的修复方案：

方案一：在chartOverlay中手动绘制指示线 #

利用GeometryReader和ChartProxy的坐标转换能力，在选中元素时绘制垂直贯穿图表的指示线：

修改你的chartOverlay部分代码：

.chartOverlay { proxy in
    GeometryReader { geo in
        // 保留原有手势逻辑
        Rectangle().fill(.clear).contentShape(Rectangle())
            .gesture(
                SpatialTapGesture()
                    .onEnded { value in
                        let element = findElement(location: value.location, proxy: proxy, geometry: geo)
                        if selectedElement?.weekday == element?.weekday {
                            selectedElement = nil
                        } else {
                            selectedElement = element
                        }
                    }
                    .exclusively(
                        before: DragGesture()
                            .onChanged { value in
                                selectedElement = findElement(
                                    location: value.location,
                                    proxy: proxy,
                                    geometry: geo
                                )
                            }
                    )
            )
        
        // 新增：绘制选中指示线
        if let selected = selectedElement {
            // 获取选中日期对应的X轴坐标（图表内部坐标）
            guard let xPosition = proxy.position(
                for: .value("Day", selected.weekday, unit: .day)
            ) else { return }
            
            // 转换为GeometryReader的坐标系
            let lineX = xPosition - geo[proxy.plotAreaFrame].origin.x
            
            // 绘制垂直指示线
            Path { path in
                path.move(to: CGPoint(x: lineX, y: 0))
                path.addLine(to: CGPoint(x: lineX, y: geo.size.height))
            }
            .stroke(.white.opacity(0.8), lineWidth: 1)
            .overlay(
                // 可选：添加选中数值标签
                VStack {
                    Text("\(selected.dailyMax) BPM")
                    Text("\(selected.dailyMin) BPM")
                }
                .foregroundColor(.white)
                .padding(4)
                .background(Color.black.opacity(0.7))
                .cornerRadius(4)
                .offset(x: lineX + 8, y: 16)
            )
        }
    }
}

关键说明：

• 用proxy.position(for:)获取选中数据点在图表内的X坐标
• 通过geo[proxy.plotAreaFrame].origin转换坐标系，确保线条在图表绘制区域内
• 可按需调整线条的颜色、宽度，或添加数值标签增强交互

方案二：使用Swift Charts原生RuleMark（更简洁） #

直接在Chart内部添加条件渲染的RuleMark，无需手动处理坐标转换：

在你的Chart闭包内，添加以下代码（放在BarMark之后）：

Chart(data, id: \.weekday) { dataPoint in
    // 原BarMark代码不变
    Plot {
        BarMark(
            x: .value("Day", dataPoint.weekday, unit: .day),
            yStart: .value("BPM Min", dataPoint.dailyMin),
            yEnd: .value("BPM Max", dataPoint.dailyMax),
            width: .fixed(isOverview ? 8 : barWidth)
        )
        .clipShape(Capsule())
        .foregroundStyle(chartColor.gradient)
    }
    .accessibilityLabel(dataPoint.weekday.weekdayString)
    .accessibilityValue("\(dataPoint.dailyMin) to \(dataPoint.dailyMax) BPM")
    .accessibilityHidden(isOverview)
    
    // 新增：选中时显示指示线
    if let selected = selectedElement, selected.weekday == dataPoint.weekday {
        RuleMark(
            x: .value("Selected Day", dataPoint.weekday, unit: .day)
        )
        .foregroundStyle(.white.opacity(0.8))
        .lineStyle(StrokeStyle(lineWidth: 1))
        // 可选：添加Y轴范围的标记
        .annotation(position: .top) {
            VStack {
                Text("\(dataPoint.dailyMax)")
                Text("\(dataPoint.dailyMin)")
            }
            .foregroundColor(.white)
            .padding(4)
            .background(Color.black.opacity(0.7))
            .cornerRadius(4)
        }
    }
}

这个方案更符合Swift Charts的设计理念，无需手动处理坐标系，代码更简洁易维护。

额外注意事项 #

• 确保selectedElement是@State或@Binding变量，这样状态变化时视图会自动刷新
• 若线条仍不显示，检查proxy.plotAreaFrame的坐标是否正确，或调整线条的zIndex确保在图表上方

内容的提问来源于stack exchange，提问作者Artiom Harshkou