SwiftUI中使用Swift Charts绘制多折线图的问题求助

你的问题出在当前代码逻辑上：你在Chart(measurements)的闭包里为每一个Measurement实例同时添加两个LineMark，这会导致Chart将每个数据点的两个指标值视为独立零散点，无法识别出两条完整的折线系列。下面提供两种可行的解决方案：

方案一：转换为Chart推荐的长格式数据结构（更规范） #

Swift Charts更适合处理长格式数据集（每个数据点对应一个系列的单一值），我们可以先将现有的Measurement数组转换为这种结构：

1. 定义新的单指标数据结构体：

struct AirQualityReading: Identifiable {
    let id = UUID()
    let time: String // 若有条件建议改为Date类型，优化时间轴表现
    let indicator: String // 标记是"PM2.5"还是"PM10"
    let value: Float
}

2. 将原数据集转换为长格式：

// 假设measurements是你已解析好的[Measurement]数组
var formattedReadings: [AirQualityReading] {
    measurements.flatMap { item in
        [
            AirQualityReading(time: item.id, indicator: "PM2.5", value: item.pm25),
            AirQualityReading(time: item.id, indicator: "PM10", value: item.pm10)
        ]
    }
}

3. 绘制多折线图：

Chart(formattedReadings) { reading in
    LineMark(
        x: .value("时间", reading.time),
        y: .value("数值", reading.value)
    )
    // 通过indicator字段区分不同折线系列
    .foregroundStyle(by: .value("空气质量指标", reading.indicator))
}
.chartLegend(position: .bottom) // 显示图例

方案二：不修改原数据结构，直接绘制双折线 #

如果不想转换数据结构，可以分别为PM2.5和PM10两个指标单独绘制折线，确保每个指标的所有数据点被归为同一个系列：

Chart {
    // 绘制PM2.5折线
    ForEach(measurements) { item in
        LineMark(
            x: .value("时间", item.id),
            y: .value("PM2.5", item.pm25)
        )
    }
    .foregroundStyle(.blue) // 设置折线颜色
    .symbol(.circle) // 设置数据点样式

    // 绘制PM10折线
    ForEach(measurements) { item in
        LineMark(
            x: .value("时间", item.id),
            y: .value("PM10", item.pm10)
        )
    }
    .foregroundStyle(.orange)
    .symbol(.square)
}
.chartLegend(position: .bottom)

额外优化建议 #

如果你的时间字段当前是字符串类型，建议将其转换为Date类型存储（修改Measurement的id为Date），这样Swift Charts会自动优化时间轴的刻度排序和标签显示，比字符串类型的时间轴更专业。

内容的提问来源于stack exchange，提问作者John Harrington