SwiftUI 中的图表符号和图例符号不同

Question

.symbol(by:) 修饰符生成的图例符号与图表中使用的符号不同。我在图表中专门使用了三角形和加号符号，但它们被忽略，并且圆形和方形符号在图例部分中自动生成。我怎样才能让他们同意？

struct Line: Identifiable {
    let xyzipped: [(Double, Double)]
    let symbol: BasicChartSymbolShape
    let legendStr: String
    let id = UUID()
    
    init(x: [Double],
         y: [Double],
         symbol: BasicChartSymbolShape,
         legendStr: String)
    {
        self.xyzipped = Array(zip(x, y))
        self.symbol = symbol
        self.legendStr = legendStr
    }
}


struct ChartOfLines: View {
    let lines: [Line]
    
    init() {
        let line1 = Line(x: [0, 1, 2, 3, 4],
                         y: [3, 5, 8, -1, 0],
                         symbol: BasicChartSymbolShape.triangle,
                         legendStr: "line1")
        let line2 = Line(x: [0, 1, 2, 3, 4],
                         y: [5, 4, 3, 7, 1],
                         symbol: BasicChartSymbolShape.plus,
                         legendStr: "line2")
        
        lines = [line1, line2]
    }
    
    var body: some View {
        Chart(lines, id: \.id) { line in
            ForEach(line.xyzipped, id:\.0) { xy in
                LineMark(
                    x: .value("X values", xy.0),
                    y: .value("Y values", xy.1)
                )
                .lineStyle(StrokeStyle(lineWidth: 0.5))
                
                PointMark(
                    x: .value("X values", xy.0),
                    y: .value("Y values", xy.1)
                )
            }
            .symbol(line.symbol)
            .symbol(by: .value("", line.legendStr))
            .foregroundStyle(by: .value("", line.legendStr))
        }
        .frame(width: 500, height: 500)
        .padding()
    }
}

这是生成的图表：

Answer 1

如果您希望

chartLegend

显示在图例字符串的左侧，请创建自定义

ChartSymbolShape

：

测试示例，根据需要调整 UI：

struct Line: Identifiable {
    let xyzipped: [(Double, Double)]
    let symbol: BasicChartSymbolShape
    let legendStr: String
    let lineColor: Color
    let id = UUID()
    
    init(x: [Double],
         y: [Double],
         symbol: BasicChartSymbolShape,
         legendStr: String,
         lineColor: Color)
    {
        self.xyzipped = Array(zip(x, y))
        self.symbol = symbol
        self.legendStr = legendStr
        self.lineColor = lineColor
    }
}


struct ContentView: View {
    let lines: [Line]
    
    init() {
        let line1 = Line(x: [0, 1, 2, 3, 4],
                         y: [3, 5, 8, -1, 0],
                         symbol: BasicChartSymbolShape.triangle,
                         legendStr: "line1", lineColor: .green)
        let line2 = Line(x: [0, 1, 2, 3, 4],
                         y: [5, 4, 3, 7, 1],
                         symbol: BasicChartSymbolShape.plus,
                         legendStr: "line2", lineColor: .blue)
        
        
        lines = [line1, line2]
    }
    
    var body: some View {
        Chart(lines, id: \.id) { line in
            ForEach(line.xyzipped, id:\.0) { xy in
                LineMark(
                    x: .value("X values", xy.0),
                    y: .value("Y values", xy.1)
                )
                .lineStyle(StrokeStyle(lineWidth: 0.5))
                .foregroundStyle(line.lineColor)
                
                PointMark(
                    x: .value("X values", xy.0),
                    y: .value("Y values", xy.1)
                )
                .foregroundStyle(line.lineColor)
            }
            .symbol(line.symbol)
            .foregroundStyle(by: .value("", line.legendStr))
        }
        .chartLegend(position: .bottomLeading, alignment: .bottomLeading) {
            HStack() {
                ForEach(lines) { xy in
                    HStack {
                        xy.symbol
                            .frame(width: 10, height: 10)
                            .foregroundColor(xy.lineColor)
                        Text(xy.legendStr).foregroundColor(.black)
                    }
                }
            }
        }
        .frame(width: 500, height: 500)
        .padding()
    }
}