SwiftUI Charts：如何自定义AreaMark颜色并正确显示对应图例

要同时实现自定义AreaMark颜色和对应颜色的图例，核心是利用图表的颜色缩放（scale）功能，而非直接给标记硬设颜色。具体做法如下：

1. 定义自定义颜色映射
   根据你的series字段类型（比如String、Int或枚举），创建对应的颜色字典：

   // 示例：假设series是String类型，对应四分位的自定义颜色
   let areaColors: [String: Color] = [
       "Q1": .cyan,
       "Q2": .teal,
       "Q3": .amber,
       "Q4": .pink
   ]
   

2. 修改Chart代码
   保留foregroundStyle(by:)来关联分组数据（触发图例生成），同时通过chartForegroundStyleScale将自定义颜色映射应用到整个图表：

   Chart(simulationRange) {
       AreaMark(
           x: .value("Date", $0.date),
           yStart: .value("Minimum Value", $0.minValue),
           yEnd: .value("Maximum Value", $0.maxValue)
       )
       // 关联分组字段，用于生成图例
       .foregroundStyle(by: .value("Quartile", $0.series))
   }
   // 应用自定义颜色映射，覆盖默认颜色方案
   .chartForegroundStyleScale(mapping: areaColors)
   

为什么之前的方法不行？ #

• 直接用.foregroundStyle(areaColors[$0.series]!)：相当于给每个AreaMark单独设置颜色，没有触发图表的分组图例逻辑，所以不会显示图例。
• 同时保留两行代码：foregroundStyle(by:)会覆盖之前的硬设颜色，但图例仍使用默认颜色方案，导致颜色和图例不匹配。

额外说明 #

如果你的series是枚举类型，只需将颜色字典的键改为枚举值即可，比如：

enum Quartile: String, CaseIterable {
    case q1, q2, q3, q4
}

let areaColors: [Quartile: Color] = [
    .q1: .cyan,
    .q2: .teal,
    .q3: .amber,
    .q4: .pink
]

内容的提问来源于stack exchange，提问作者Joao Frasco