SwiftUI Charts：如何在LineMark与RuleMark交点处添加圆形标记？

你原来的代码无法实现需求，是因为RuleMark的symbol()修饰符只会在自身线条的指定位置添加符号，它无法自动识别与其他曲线的交点坐标。要在交点处添加圆点，你需要先获取对应x值在目标曲线上的y值，再用PointMark在该坐标点绘制圆点。

具体实现步骤： #

1. 获取对应x值的曲线y值：从你的橙色、红色曲线数据源中，筛选出与RuleMark的x值（即datesArray[Int(daySlider)].sunrise）匹配的y值。
2. 用PointMark绘制交点圆点：将获取到的(x,y)坐标传入PointMark，设置对应的样式即可。

示例代码： #

假设你的橙色曲线数据源为orangeDataset（元素包含date和value字段），红色曲线数据源为redDataset，完整代码如下：

Chart {
    // 橙色曲线
    LineMark(
        x: .value("Date", \.date),
        y: .value("Value", \.value)
    )
    .foregroundStyle(.orange)
    .data(orangeDataset)
    
    // 红色曲线
    LineMark(
        x: .value("Date", \.date),
        y: .value("Value", \.value)
    )
    .foregroundStyle(.red)
    .data(redDataset)
    
    // 垂直滑块对应的RuleMark
    RuleMark(x: .value("Date", datesArray[Int(daySlider)].sunrise))
        .foregroundStyle(Color.black)
        .lineStyle(StrokeStyle(lineWidth: 1))
    
    // 橙色曲线交点圆点
    if let orangeYValue = orangeDataset.first(where: { 
        $0.date == datesArray[Int(daySlider)].sunrise 
    })?.value {
        PointMark(
            x: .value("Date", datesArray[Int(daySlider)].sunrise),
            y: .value("Value", orangeYValue)
        )
        .symbol {
            Circle()
                .fill(.orange)
                .frame(width: 10)
        }
    }
    
    // 红色曲线交点圆点
    if let redYValue = redDataset.first(where: { 
        $0.date == datesArray[Int(daySlider)].sunrise 
    })?.value {
        PointMark(
            x: .value("Date", datesArray[Int(daySlider)].sunrise),
            y: .value("Value", redYValue)
        )
        .symbol {
            Circle()
                .fill(.red)
                .frame(width: 10)
        }
    }
}

补充说明： #

• 如果你的曲线数据是连续的（比如时间点不是完全匹配），可以通过插值计算出对应x值的近似y值，确保圆点位置更精准。
• 若需要动态跟随滑块移动，只要保证daySlider的值变化时，数据源的筛选逻辑能实时更新即可。

内容的提问来源于stack exchange，提问作者Edward Hasted