如何使用 SwiftUI 和 Swift Charts 循环遍历数组以在图表上显示值

Question

使用 SwiftUI 和 Swift Charts 我正在尝试从模型创建一个图表，以便图表单独出现在由模型中的示例数据组成的视图中。

这是我的模型：

import Foundation

struct VerticalBarChart: Identifiable, Hashable {
  let id: UUID
  var image: String
  var title: String
  var xValue: [String]
  var yValue: [Int]
  var dateCreated: Date
}

extension VerticalBarChart {
  static var sampleData: [VerticalBarChart] {
    [
      VerticalBarChart(
        id: UUID(),
        image: "chart.bar",
        title: "Vertical Bar Chart 1",
        xValue: ["Monday", "Tuesday", "Wednesday", "Thursday", "friday"],
        yValue: [500, 600, 700, 800, 900, 1000],
        dateCreated: Date.now),
      VerticalBarChart(
        id: UUID(),
        image: "chart.bar",
        title: "Vertical Bar Chart 2",
        xValue: ["Week 1", "Week 2", "Week 3", "Week 3"],
        yValue: [1, 2, 3, 4],
        dateCreated: Date.now),
      VerticalBarChart(
        id: UUID(),
        image: "chart.bar",
        title: "Vertical Bar Chart 3",
        xValue: ["Wednesday"],
        yValue: [700],
        dateCreated: Date.now)
    ]
  }
}

这是我的查看代码：

import SwiftUI
import Charts

struct VerticalBarChartView: View {
  
  var verticalBarChart: VerticalBarChart

  
  var body: some View {
    VStack {
      
      
      Chart {
        ForEach(VerticalBarChart.sampleData) { element in
          BarMark(
            x: .value("x-axis", element.xValue),
            y: .value("y-axis", element.yValue)
          )
        }
      }
    }
  }
}

任何人都可以帮助我更正/编写代码，以便视图仅显示来自每个视图的一个图表的数据，其中仅包含来自 xValue 和 yValue 的一个数据集的数据。理想情况下，我想在根据示例数据创建的三个单独视图上显示三个图表。

例如，第一个图表应从以下位置创建：

xValue: ["Monday", "Tuesday", "Wednesday", "Thursday", "friday"],
yValue: [500, 600, 700, 800, 900, 1000]

任何帮助将不胜感激。

托尼。

Answer 1

//MARK: -  variable

var ydata = VerticalBarChart.sampleData.first!.yValue
var xdata = VerticalBarChart.sampleData.first!.xValue
var chartData: [(String, Int)] {
    Array(zip(xdata,ydata))
}

//MARK: - view
    
var body: some View {
    List {
        Chart(chartData, id: \.0 ) { item in
            BarMark(
                x: .value("x-axis", item.0),
                y: .value("y-axis", item.1)
            )
        }
        .frame(height: 250)
    }
}