如何设置Vega-Lite图表图例顺序及指定线条颜色

一、自定义图例项顺序 #

要让'Vorpal Rabbits'排在图例首位，直接在颜色比例尺（scale）的domain中指定类别顺序即可，图例默认会遵循domain的排列逻辑：

{
  "mark": "line",
  "encoding": {
    "color": {
      "field": "species",
      "type": "nominal",
      "scale": {
        "domain": ["Vorpal Rabbits", "其他物种1", "其他物种2"], // 按需求定义顺序
        "range": ["red", "blue", "green"]
      },
      "legend": {
        "title": "物种" // 可选：自定义图例标题
      }
    }
  }
}

如果类别是动态生成的（无法提前枚举），可通过数据转换标记目标项优先级，再基于优先级排序：

{
  "transform": [
    {
      "calculate": "datum.species === 'Vorpal Rabbits' ? 0 : 1",
      "as": "sortPriority"
    }
  ],
  "encoding": {
    "color": {
      "field": "species",
      "type": "nominal",
      "legend": {
        "sort": { "field": "sortPriority", "order": "ascending" } // 优先级0的项排最前
      }
    }
  }
}

二、为特定线条分配固定颜色，其余使用颜色范围 #

要让'Vorpal Rabbits'始终显示红色，其余线条使用包含green的颜色范围，有两种实现方式：

方法1：固定比例尺映射（已知所有类别） #

若能提前枚举所有类别，直接在scale.range中对应位置设置固定颜色，其余项分配颜色范围值：

{
  "encoding": {
    "color": {
      "field": "species",
      "type": "nominal",
      "scale": {
        "domain": ["Vorpal Rabbits", "Cheshire Cats", "March Hares"],
        "range": ["red", "#4c78a8", "green"] // 固定目标项颜色，其他项用范围值
      }
    }
  }
}

方法2：动态类别下的条件颜色 #

若类别动态生成，使用condition给目标项设置固定颜色，其余项沿用默认颜色比例尺：

{
  "encoding": {
    "color": {
      "condition": {
        "test": "datum.species === 'Vorpal Rabbits'",
        "value": "red" // 固定目标项为红色
      },
      "field": "species",
      "type": "nominal",
      "scale": {
        "range": ["green", "#4c78a8", "#f58518"] // 其余项使用此颜色范围
      },
      "legend": {
        "sort": ["Vorpal Rabbits", null] // 强制目标项排首位，其余按默认顺序
      }
    }
  }
}

组合实现示例 #

以下是同时满足两个需求的完整配置：

{
  "data": {
    "values": [
      {"species": "Vorpal Rabbits", "year": 2010, "population": 100},
      {"species": "Vorpal Rabbits", "year": 2020, "population": 150},
      {"species": "Cheshire Cats", "year": 2010, "population": 80},
      {"species": "Cheshire Cats", "year": 2020, "population": 120},
      {"species": "March Hares", "year": 2010, "population": 60},
      {"species": "March Hares", "year": 2020, "population": 90}
    ]
  },
  "mark": "line",
  "encoding": {
    "x": {"field": "year", "type": "ordinal"},
    "y": {"field": "population", "type": "quantitative"},
    "color": {
      "field": "species",
      "type": "nominal",
      "scale": {
        "domain": ["Vorpal Rabbits", "Cheshire Cats", "March Hares"],
        "range": ["red", "green", "#f58518"]
      },
      "legend": {
        "sort": {"field": "species", "order": "ascending"} // 匹配domain顺序
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者Greg Bartlett