如何覆盖Swift Charts图例标签？解决系列名重复显示问题

要实现「用唯一标识区分系列，同时在图例显示自定义文本」的需求，核心是把系列的区分标识和图例显示文本拆分开，不让Swift Charts默认用显示文本作为系列的判定依据。

步骤1：自定义系列标识类型 #

创建一个同时遵循Plottable和Hashable的结构体，用唯一ID来区分系列，用displayName存储图例要显示的文本：

import SwiftUI
import Charts

struct SeriesIdentifier: Plottable, Hashable {
    let id: UUID
    let displayName: String
    
    // 实现Plottable协议的必要方法
    var primitivePlottable: String {
        id.uuidString // 用UUID字符串作为底层可绘制值，保证全局唯一
    }
    
    init(id: UUID = UUID(), displayName: String) {
        self.id = id
        self.displayName = displayName
    }
    
    // 显式实现Hashable，仅基于id判断是否为同一系列
    static func == (lhs: Self, rhs: Self) -> Bool {
        lhs.id == rhs.id
    }
    
    func hash(into hasher: inout Hasher) {
        hasher.combine(id)
    }
}

步骤2：更新你的数据模型 #

把原有模型中存储系列名称的字段替换成这个SeriesIdentifier，确保每个系列都有唯一ID：

struct PlotPoint: Identifiable {
    let id: UUID = UUID()
    let x: Double
    let y: Double
}

struct PlotSeries: Identifiable {
    let id: UUID = UUID()
    let identifier: SeriesIdentifier
    let points: [PlotPoint]
    
    // 便捷初始化方法，直接传入显示名称
    init(displayName: String, points: [PlotPoint]) {
        self.identifier = SeriesIdentifier(displayName: displayName)
        self.points = points
    }
}

步骤3：构建图表并自定义图例 #

在Chart中用SeriesIdentifier作为系列的分组依据，同时手动构建图例，指定每个图例项的显示文本：

struct ChartView: View {
    // 示例数据：两个重名系列
    let series: [PlotSeries] = [
        PlotSeries(displayName: "Hulk", points: [
            PlotPoint(x: 1, y: 3),
            PlotPoint(x: 2, y: 5),
            PlotPoint(x: 3, y: 4)
        ]),
        PlotSeries(displayName: "Hulk", points: [
            PlotPoint(x: 1, y: 2),
            PlotPoint(x: 2, y: 4),
            PlotPoint(x: 3, y: 6)
        ])
    ]
    
    var body: some View {
        Chart(series) { series in
            ForEach(series.points) { point in
                LineMark(
                    x: .value("X轴", point.x),
                    y: .value("Y轴", point.y)
                )
            }
            // 用SeriesIdentifier作为系列区分依据
            .foregroundStyle(by: .value("系列", series.identifier))
            .symbol(by: .value("系列", series.identifier))
        }
        // 自定义图例内容
        .chartLegend(content: {
            HStack(spacing: 16) {
                ForEach(series) { series in
                    HStack(spacing: 6) {
                        // 显示对应系列的颜色块
                        Rectangle()
                            .frame(width: 12, height: 12)
                        // 显示自定义的图例文本
                        Text(series.identifier.displayName)
                            .font(.caption)
                    }
                }
            }
        })
        // 给不同系列分配不同颜色
        .chartForegroundStyleScale(range: [.blue, .green])
    }
}

关键说明 #

• Swift Charts会根据SeriesIdentifier的Hash值（仅基于UUID）来区分系列，所以即使displayName相同，也不会合并。
• 图例完全由你自定义，直接使用displayName，后续用户修改displayName时，只需更新模型中的值，图例就会自动更新。
• 如果需要稳定的系列颜色，可以维护一个[UUID: Color]映射表，绑定到图例和系列样式中。

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