iOS 18 Swift Charts中LinePlot与PointPlot的正确组合及系列样式设置

你的核心问题是将同一系列的LinePlot和PointPlot拆分开独立配置样式，导致Chart把它们识别为多个独立系列，进而出现图例符号不匹配、数据点叠加的问题。以下是修正方案：

修正后的代码 #

struct PlotPoint {
    let x: Double
    let y: Double
}

// prepopulate a table with the data we want to plot
let cosData: [PlotPoint] = stride(from: -3, to: 3.01, by: 0.5).map { x in
    PlotPoint(x: x, y: cos(x))
}
let sinData: [PlotPoint] = stride(from: -3, to: 3.01, by: 0.5).map { x in
    PlotPoint(x: x, y: sin(x))
}

struct LinePlotView: View {
    var body: some View {
        if #available(iOS 18.0, *) {
            Chart {
                // 正弦系列：将折线和点放在同一个PlotGroup中
                PlotGroup(id: "sin-series") {
                    LinePlot(sinData,
                             x: .value("x", \.x),
                             y: .value("y", \.y)
                    )
                    PointPlot(sinData,
                              x: .value("x", \.x),
                              y: .value("y", \.y)
                    )
                }
                .foregroundStyle(by: .value("expression", "y=sin(x)"))
                .symbol(.square) // 手动指定正弦点的符号

                // 余弦系列：同样放在同一个PlotGroup中
                PlotGroup(id: "cos-series") {
                    LinePlot(cosData,
                             x: .value("x", \.x),
                             y: .value("y", \.y)
                    )
                    PointPlot(cosData,
                              x: .value("x", \.x),
                              y: .value("y", \.y)
                    )
                }
                .foregroundStyle(by: .value("expression", "y=cos(x)"))
                .symbol(.cross) // 手动指定余弦点的符号
            }
            .chartXScale(domain: -3 ... 3)
            .chartYScale(domain: -1.5 ... 1.5)
            .padding()
        } else {
            Text("Not available on iOS < 18")
        }
    }
}

关键调整说明 #

1. 用PlotGroup统一系列：将同一条曲线的LinePlot和PointPlot包裹在PlotGroup内，让Chart识别它们属于同一个数据系列，避免拆分导致的重复图例和点叠加。
2. 集中配置样式：在PlotGroup级别设置.foregroundStyle(by:)和.symbol()，确保系列内的折线和点共享同一套样式，同时图例符号与图表实际显示完全一致。
3. 手动指定符号更可控：直接用.symbol(.square)、.symbol(.cross)这类具体符号样式，替代依赖分组自动分配的方式，彻底解决图例与实际显示不符的问题。

如果希望保留自动符号分配逻辑，也可以将.symbol(by:)放在PlotGroup级别，但需要确保分组键唯一且对应：

PlotGroup(id: "sin-series") {
    // ... 折线和点 ...
}
.foregroundStyle(by: .value("expression", "y=sin(x)"))
.symbol(by: .value("series", "sin"))

内容的提问来源于stack exchange，提问作者Curious Jorge