SwiftUI Charts能否基于非Y值的自定义条件更改LineMark与AreaMark颜色？

问题 #

我希望使用SwiftUI绘制AreaMark图表，根据数据点的非Y值属性设置不同颜色（效果类似分段着色的面积图）。尝试为单个数据点设置foregroundStyle时，只有最后一个点的颜色生效；基于Y值设置LineMark和AreaMark颜色的方法比较容易实现，但找不到基于自定义条件设置颜色的方式，请问是否可以通过Charts框架实现？

解决方案 #

可以实现，核心思路是将数据按自定义属性分组为连续的段，然后为每个分段单独绘制AreaMark，从而为不同段设置对应颜色。

步骤1：定义数据模型

先定义包含自定义属性的数据源结构体：

struct ChartData: Identifiable {
    let id = UUID()
    let x: Int
    let y: Double
    let category: String // 用于区分颜色的非Y自定义属性
}

步骤2：按自定义属性分组数据

需要将连续的同属性数据合并为分段，避免非连续的同属性数据被错误合并：

func groupDataByCategory(_ data: [ChartData]) -> [[ChartData]] {
    guard !data.isEmpty else { return [] }
    var groups: [[ChartData]] = []
    var currentGroup: [ChartData] = [data[0]]
    
    for item in data.dropFirst() {
        if item.category == currentGroup.last?.category {
            currentGroup.append(item)
        } else {
            groups.append(currentGroup)
            currentGroup = [item]
        }
    }
    groups.append(currentGroup)
    return groups
}

步骤3：绘制分段着色的AreaMark

遍历分组后的数据集，为每个分段单独绘制AreaMark并设置对应颜色：

struct ColorfulAreaChart: View {
    // 示例数据
    let data: [ChartData] = [
        ChartData(x: 1, y: 2.0, category: "A"),
        ChartData(x: 2, y: 3.0, category: "A"),
        ChartData(x: 3, y: 2.5, category: "B"),
        ChartData(x: 4, y: 4.0, category: "B"),
        ChartData(x: 5, y: 3.5, category: "A"),
        ChartData(x: 6, y: 2.0, category: "A")
    ]
    
    // 分组后的数据
    var groupedData: [[ChartData]] {
        groupDataByCategory(data)
    }
    
    // 自定义属性与颜色的映射
    private func colorForCategory(_ category: String) -> Color {
        switch category {
        case "A": return .blue.opacity(0.5)
        case "B": return .orange.opacity(0.5)
        default: return .gray.opacity(0.5)
        }
    }
    
    var body: some View {
        Chart {
            ForEach(groupedData, id: \.self) { segment in
                AreaMark(
                    x: .value("X轴", segment.map { $0.x }),
                    y: .value("Y轴", segment.map { $0.y })
                )
                .foregroundStyle(colorForCategory(segment[0].category))
                // 可选：为分段添加边框，增强区分度
                .border(colorForCategory(segment[0].category).opacity(1), width: 1)
            }
        }
        .padding()
    }
}

原理说明

AreaMark是基于连续数据集绘制的整体图形，直接为单个数据点设置样式无法实现分段着色。通过将数据按自定义属性拆分为连续分段，每个分段独立绘制AreaMark，就能为不同段分配独立的颜色，完美匹配需求。

这种方式同样适用于LineMark的分段着色场景，只需将AreaMark替换为LineMark即可。

内容的提问来源于stack exchange，提问作者Carl Sarkis