如何在SwiftUI Chart中使用自定义Path形状作为数据标记？

实现自定义ChartSymbolShape #

要让你的BoatShape能作为图表数据标记，只需让它遵循ChartSymbolShape协议——这个协议会帮你把形状适配到图表的坐标系统中。修改你的BoatShape代码如下：

struct BoatShape: ChartSymbolShape {
    // 定义标记的默认尺寸，可根据需求调整
    var symbolFrame: CGRect {
        CGRect(x: 0, y: 0, width: 24, height: 24)
    }
    
    func path(in rect: CGRect) -> Path {
        var path = Path()
        
        // 保留你原本的形状绘制逻辑，示例如下：
        path.move(to: CGPoint(x: rect.midX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.midY))
        path.addLine(to: CGPoint(x: rect.midX, y: rect.maxY))
        path.addLine(to: CGPoint(x: rect.minX, y: rect.midY))
        path.closeSubpath()
        
        return path
    }
}

接着修改你的Chart代码，用symbol()修饰符替换默认的PointMark样式：

Chart {
    PlotMark(
        x: .value("Boat", "Pace Boat"),
        y: .value("Pace Boat", (viewModel.duration*(Double(viewModel.split) / paceBoat)))
    )
    .symbol(BoatShape())
    .symbolSize(24) // 大小建议和symbolFrame定义的尺寸对应
    
    PlotMark(
        x: .value("Boat", "You"),
        y: .value("Your Pace", viewModel.boat.last?.1.distance ?? 0)
    )
    .symbol(BoatShape())
    .symbolSize(24)
}

注：用PlotMark比PointMark更适配自定义标记，当然你也可以继续用PointMark，只需给它加上.symbol(BoatShape())修饰符即可。

在形状上方添加绑定坐标的文本 #

如果要在自定义形状上方显示和图表坐标绑定的文本，用Annotation最方便，它会自动跟随数据点的位置：

Chart {
    PlotMark(
        x: .value("Boat", "Pace Boat"),
        y: .value("Pace Boat", (viewModel.duration*(Double(viewModel.split) / paceBoat)))
    )
    .symbol(BoatShape())
    .symbolSize(24)
    // 添加文本注释，自动对齐到标记上方
    .annotation(position: .top, alignment: .center) {
        Text("Pace")
            .font(.caption)
            .foregroundColor(.black)
    }
    
    PlotMark(
        x: .value("Boat", "You"),
        y: .value("Your Pace", viewModel.boat.last?.1.distance ?? 0)
    )
    .symbol(BoatShape())
    .symbolSize(24)
    .annotation(position: .top, alignment: .center) {
        Text("\(viewModel.boat.last?.1.distance ?? 0, specifier: "%.1f")")
            .font(.caption)
            .foregroundColor(.blue)
    }
}

内容的提问来源于stack exchange，提问作者Sapphire Carter