SwiftUI Chart：如何叠加多个图形数据？

Question

这是两张图表。 我想在一张图表中同时显示

object

和

object2

的数据。

可以吗？

Chart(db.objects, id: \.self) { object in
    LineMark(
        x: .value("name", object.name),
        y: .value("value", Int(object.value) ?? 0)
    )
}

Chart(db.objects2, id: \.self) { object2 in
    LineMark(
        x: .value("name", object2.name),
        y: .value("value", Int(object2.value) ?? 0)
    )
}

Answer 1

我刚刚从苹果开发者网站找到了方法

https://developer.apple.com/documentation/charts/chart/

struct ProfitOverTime {
    var date: Date
    var profit: Double
}

let departmentAProfit: [ProfitOverTime] = [] // ...
let departmentBProfit: [ProfitOverTime] = [] // ...

var body: some View {
    Chart {
        ForEach(departmentAProfit) {
            LineMark(
                x: .value("Date", $0.date),
                y: .value("Profit A", $0.profit)
            )
            .foregroundStyle(.blue)
        }
        ForEach(departmentBProfit) {
            LineMark(
                x: .value("Date", $0.date),
                y: .value("Profit B", $0.profit)
            )
            .foregroundStyle(.green)
        }
        RuleMark(
            y: .value("Threshold", 500.0)
        )
        .foregroundStyle(.red)
    }
}

Answer 2

这是一个替代解决方案。由于数据结构相同，因此数据可以是一个来源并使用一个 LineMark 显示。

作为示例，将 dept 添加到模型中以标识代表图表中单条线的每组数据：

    struct ProfitOverTime {
        var dept: String
        var date: Date
        var profit: Double
    }

数据组合成一个数组：

    let data: [ProfitOverTime] = [] // ...

前景样式基于部门，即图表中的每一行。

struct DepartmentChart: View {
    var body: some View {
        Chart(data) {
            LineMark(
                x: .value("Date", $0.date),
                y: .value("Profit", $0.profit)
                series: .value("Department", $0.dept)
            )
            .foregroundStyle(by: .value("Department", $0.dept))
    
            RuleMark(
                y: .value("Threshold", 500.0)
            )
            .foregroundStyle(.red)
        }
        .chartForegroundStyleScale(["Profit A": .green, "Profit B": .blue])
    }
}

添加了系列以通过颜色识别每条线：

chartForegroundStyleScale 是可选的，因为每条线都会自动采用不同的颜色。但是chartForegroundStyleScale可以用来自定义线条颜色。