主页 / coding / 问题 / 79310523
Accepted
user20325868
Asked: 2024-12-27 06:05:25 +0800 CST

我正在尝试了解 swiftUI Charts API，特别是覆盖图表和修改图表的某些方面

  • 772

我刚开始使用 swiftui 中的图表，我很挣扎。我想用折线图覆盖下图中的条形图。但我能弄清楚的唯一方法是嵌入 ZStack，但如屏幕截图所示，两个图表（目前传递了相同的数据）不对齐。我想显示一条覆盖条形图的平均线，但我就是搞不清楚。我对图表了解不多，而且我对这个 API 也是新手。此外，我想在条形图上或条形图上方显示实际金额。不确定在 swiftui 中是否可以实现这些。如果没有其他方法，您能否为我指出一些好的文档或有关图表的其他信息？谢谢

在此处输入图片描述

这是我的代码的简化

        ZStack {
        Chart {
            ForEach(payments, id: \.date) { payment in

                BarMark(
                    x: .value("Date", payment.date),
                    y: .value("Amount", payment.amount)
                )
            }
        }

        Chart {

            ForEach(payments, id: \.date) { payment in
                LineMark(
                    x: .value("Date", payment.date),
                    y: .value("Amount", payment.amount)
                )
            }
        }
    }
swiftui

1 个回答

  1. Best Answer

    尝试使用这种方法，将 oneChart与 two结合使用ForEach，例如：

     Chart {
     ForEach(payments, id: \.date) { payment in
         BarMark(
             x: .value("Date", payment.date, unit: .day), // <-- adjust as required
             y: .value("Amount", payment.amount)
         )
     }

     ForEach(payments, id: \.0) { payment in
         LineMark(
             x: .value("Date", payment.date, unit: .day), // <-- adjust as required
             y: .value("Amount", payment.amount)
         )
     }
 }

    这是我的完整测试代码，展示了如何将BarMark与LineMark放在顶部。

    struct ChartData: Identifiable {
    let id = UUID()
    let value: Double
    let date: Date
}

struct ContentView: View {
    
    let chartData: [ChartData] = (0..<10).map { index in
        ChartData(value: Double.random(in: 1...10) ,
                  date: Date().addingTimeInterval(Double(index) * 60 * 60 * 24) )
    }

    var body: some View {
        Chart {
            ForEach(chartData) { data in
                BarMark(
                    x: .value("Date", data.date, unit: .day),
                    y: .value("Value", data.value)
                )
                .foregroundStyle(Color.blue)
            }
            ForEach(chartData) { data in
                LineMark(
                    x: .value("Date", data.date, unit: .day),
                    y: .value("Value", data.value)
                )
                .foregroundStyle(Color.red)
            }
        }
        .chartLegend(.hidden)
        .chartXAxis(.hidden)
        .chartYAxis(.hidden)
    }
}
    • 1

相关问题