图表符号和图例符号在SwiftUI中不同。

huangapple
go评论98阅读模式
英文:

Chart Symbols and Legend Symbols Are Diferent in SwiftUI

问题

图表中使用.symbol(by:)修饰符生成的图例符号与图表中使用的符号不同。我特别在图表中使用了三角形和加号符号，但它们被忽略了，自动在图例部分生成了圆圈和方形符号。如何使它们一致？

以下是修复代码：

  1. struct Line: Identifiable {
  2.     let xyzipped: [(Double, Double)]
  3.     let symbol: BasicChartSymbolShape
  4.     let legendStr: String
  5.     let id = UUID()
  6.     
  7.     init(x: [Double],
  8.          y: [Double],
  9.          symbol: BasicChartSymbolShape,
  10.          legendStr: String)
  11.     {
  12.         self.xyzipped = Array(zip(x, y))
  13.         self.symbol = symbol
  14.         self.legendStr = legendStr
  15.     }
  16. }
  18. struct ChartOfLines: View {
  19.     let lines: [Line]
  20.     
  21.     init() {
  22.         let line1 = Line(x: [0, 1, 2, 3, 4],
  23.                          y: [3, 5, 8, -1, 0],
  24.                          symbol: BasicChartSymbolShape.triangle,
  25.                          legendStr: "line1")
  26.         let line2 = Line(x: [0, 1, 2, 3, 4],
  27.                          y: [5, 4, 3, 7, 1],
  28.                          symbol: BasicChartSymbolShape.plus,
  29.                          legendStr: "line2")
  30.         
  31.         lines = [line1, line2]
  32.     }
  33.     
  34.     var body: some View {
  35.         Chart(lines, id: \.id) { line in
  36.             ForEach(line.xyzipped, id:\.0) { xy in
  37.                 LineMark(
  38.                     x: .value("X values", xy.0),
  39.                     y: .value("Y values", xy.1)
  40.                 )
  41.                 .lineStyle(StrokeStyle(lineWidth: 0.5))
  42.                 
  43.                 PointMark(
  44.                     x: .value("X values", xy.0),
  45.                     y: .value("Y values", xy.1)
  46.                 )
  47.             }
  48.             .symbol(line.symbol)
  49.             .symbol(by: .value("", line.legendStr))
  50.             .foregroundStyle(by: .value("", line.legendStr))
  51.         }
  52.         .frame(width: 500, height: 500)
  53.         .padding()
  54.     }
  55. }

这将确保图例中的符号与图表中使用的一致。

英文:

Legend symbols produced by the .symbol(by:) modifier are different than the ones used in the chart. I specifically used the triangle and plus symbols in the chart, but they are disregarded and the circle and square symbols are produced automatically in the legend part. How can I make them agree?

  1. struct Line: Identifiable {
  2.     let xyzipped: [(Double, Double)]
  3.     let symbol: BasicChartSymbolShape
  4.     let legendStr: String
  5.     let id = UUID()
  6.     
  7.     init(x: [Double],
  8.          y: [Double],
  9.          symbol: BasicChartSymbolShape,
  10.          legendStr: String)
  11.     {
  12.         self.xyzipped = Array(zip(x, y))
  13.         self.symbol = symbol
  14.         self.legendStr = legendStr
  15.     }
  16. }
  19. struct ChartOfLines: View {
  20.     let lines: [Line]
  21.     
  22.     init() {
  23.         let line1 = Line(x: [0, 1, 2, 3, 4],
  24.                          y: [3, 5, 8, -1, 0],
  25.                          symbol: BasicChartSymbolShape.triangle,
  26.                          legendStr: "line1")
  27.         let line2 = Line(x: [0, 1, 2, 3, 4],
  28.                          y: [5, 4, 3, 7, 1],
  29.                          symbol: BasicChartSymbolShape.plus,
  30.                          legendStr: "line2")
  31.         
  32.         lines = [line1, line2]
  33.     }
  34.     
  35.     var body: some View {
  36.         Chart(lines, id: \.id) { line in
  37.             ForEach(line.xyzipped, id:\.0) { xy in
  38.                 LineMark(
  39.                     x: .value("X values", xy.0),
  40.                     y: .value("Y values", xy.1)
  41.                 )
  42.                 .lineStyle(StrokeStyle(lineWidth: 0.5))
  43.                 
  44.                 PointMark(
  45.                     x: .value("X values", xy.0),
  46.                     y: .value("Y values", xy.1)
  47.                 )
  48.             }
  49.             .symbol(line.symbol)
  50.             .symbol(by: .value("", line.legendStr))
  51.             .foregroundStyle(by: .value("", line.legendStr))
  52.         }
  53.         .frame(width: 500, height: 500)
  54.         .padding()
  55.     }
  56. }

Here is the produced chart:
图表符号和图例符号在SwiftUI中不同。

答案1

得分: 2

创建一个自定义的 chartLegend，如果你希望 ChartSymbolShape 出现在图例字符串的左侧：

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

  1. struct Line: Identifiable {
  2.     let xyzipped: [(Double, Double)]
  3.     let symbol: BasicChartSymbolShape
  4.     let legendStr: String
  5.     let lineColor: Color
  6.     let id = UUID()
  7.     
  8.     init(x: [Double],
  9.          y: [Double],
  10.          symbol: BasicChartSymbolShape,
  11.          legendStr: String,
  12.          lineColor: Color)
  13.     {
  14.         self.xyzipped = Array(zip(x, y))
  15.         self.symbol = symbol
  16.         self.legendStr = legendStr
  17.         self.lineColor = lineColor
  18.     }
  19. }
  21. struct ContentView: View {
  22.     let lines: [Line]
  23.     
  24.     init() {
  25.         let line1 = Line(x: [0, 1, 2, 3, 4],
  26.                          y: [3, 5, 8, -1, 0],
  27.                          symbol: BasicChartSymbolShape.triangle,
  28.                          legendStr: "line1", lineColor: .green)
  29.         let line2 = Line(x: [0, 1, 2, 3, 4],
  30.                          y: [5, 4, 3, 7, 1],
  31.                          symbol: BasicChartSymbolShape.plus,
  32.                          legendStr: "line2", lineColor: .blue)
  33.         
  34.         lines = [line1, line2]
  35.     }
  36.     
  37.     var body: some View {
  38.         Chart(lines, id: \.id) { line in
  39.             ForEach(line.xyzipped, id:\.0) { xy in
  40.                 LineMark(
  41.                     x: .value("X values", xy.0),
  42.                     y: .value("Y values", xy.1)
  43.                 )
  44.                 .lineStyle(StrokeStyle(lineWidth: 0.5))
  45.                 .foregroundStyle(line.lineColor)
  46.                 
  47.                 PointMark(
  48.                     x: .value("X values", xy.0),
  49.                     y: .value("Y values", xy.1)
  50.                 )
  51.                 .foregroundStyle(line.lineColor)
  52.             }
  53.             .symbol(line.symbol)
  54.             .foregroundStyle(by: .value("", line.legendStr))
  55.         }
  56.         .chartLegend(position: .bottomLeading, alignment: .bottomLeading) {
  57.             HStack() {
  58.                 ForEach(lines) { xy in
  59.                     HStack {
  60.                         xy.symbol
  61.                             .frame(width: 10, height: 10)
  62.                             .foregroundColor(xy.lineColor)
  63.                         Text(xy.legendStr).foregroundColor(.black)
  64.                     }
  65.                 }
  66.             }
  67.         }
  68.         .frame(width: 500, height: 500)
  69.         .padding()
  70.     }
  71. }
英文:

Create a custom chartLegend if you want the ChartSymbolShape to appear to the left of the legend string:

Example to test, adjust UI as necessary:

  1. struct Line: Identifiable {
  2.     let xyzipped: [(Double, Double)]
  3.     let symbol: BasicChartSymbolShape
  4.     let legendStr: String
  5.     let lineColor: Color
  6.     let id = UUID()
  7.     
  8.     init(x: [Double],
  9.          y: [Double],
  10.          symbol: BasicChartSymbolShape,
  11.          legendStr: String,
  12.          lineColor: Color)
  13.     {
  14.         self.xyzipped = Array(zip(x, y))
  15.         self.symbol = symbol
  16.         self.legendStr = legendStr
  17.         self.lineColor = lineColor
  18.     }
  19. }
  22. struct ContentView: View {
  23.     let lines: [Line]
  24.     
  25.     init() {
  26.         let line1 = Line(x: [0, 1, 2, 3, 4],
  27.                          y: [3, 5, 8, -1, 0],
  28.                          symbol: BasicChartSymbolShape.triangle,
  29.                          legendStr: "line1", lineColor: .green)
  30.         let line2 = Line(x: [0, 1, 2, 3, 4],
  31.                          y: [5, 4, 3, 7, 1],
  32.                          symbol: BasicChartSymbolShape.plus,
  33.                          legendStr: "line2", lineColor: .blue)
  34.         
  35.         
  36.         lines = [line1, line2]
  37.     }
  38.     
  39.     var body: some View {
  40.         Chart(lines, id: \.id) { line in
  41.             ForEach(line.xyzipped, id:\.0) { xy in
  42.                 LineMark(
  43.                     x: .value("X values", xy.0),
  44.                     y: .value("Y values", xy.1)
  45.                 )
  46.                 .lineStyle(StrokeStyle(lineWidth: 0.5))
  47.                 .foregroundStyle(line.lineColor)
  48.                 
  49.                 PointMark(
  50.                     x: .value("X values", xy.0),
  51.                     y: .value("Y values", xy.1)
  52.                 )
  53.                 .foregroundStyle(line.lineColor)
  54.             }
  55.             .symbol(line.symbol)
  56.             .foregroundStyle(by: .value("", line.legendStr))
  57.         }
  58.         .chartLegend(position: .bottomLeading, alignment: .bottomLeading) {
  59.             HStack() {
  60.                 ForEach(lines) { xy in
  61.                     HStack {
  62.                         xy.symbol
  63.                             .frame(width: 10, height: 10)
  64.                             .foregroundColor(xy.lineColor)
  65.                         Text(xy.legendStr).foregroundColor(.black)
  66.                     }
  67.                 }
  68.             }
  69.         }
  70.         .frame(width: 500, height: 500)
  71.         .padding()
  72.     }
  73. }

huangapple
  • 本文由 发表于 2023年2月6日 07:48:29
  • 转载请务必保留本文链接：https://go.coder-hub.com/75356314.html
  • charts
  • line
  • plot
  • swift
  • swiftui
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定