如何在 Vega-Lite 中用特定颜色为线条着色？答案

【问题标题】：How to color lines with specific colors in Vega-Lite?如何在 Vega-Lite 中用特定颜色为线条着色？
【发布时间】：2020-04-16 01:28:14
【问题描述】：

VegaLite 自动分配颜色。黄金价格是蓝色的，白银价格是橙色的，感觉不对。

我如何分配明确的颜色 - #F1C40F 代表金色，#95A5A6 代表银色？

我还想将data.values 保留在下面的示例代码中 - 作为一组单独的数组。

代码和Playground

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Stock prices of 5 Tech Companies over Time.",
  "data": {
    "values": [
      {
        "dates": ["2000-01", "2000-02", "2000-03"], 
        "gold": [1, 2, 1], 
        "silver": [1.5, 1, 2]
      }
    ]
  },
  "transform": [
    {"flatten": ["dates", "gold", "silver"]},
    {"fold": ["gold", "silver"], "as": ["symbol", "price"]},
    {"calculate": "datetime(datum.dates)", "as": "dates"}
  ],
  "mark": {"type": "line", "point": {"filled": false, "fill": "white"}},
  "encoding": {
    "x": {"field": "dates", "type": "temporal", "timeUnit": "yearmonth"},
    "y": {"field": "price", "type": "quantitative"},
    "color": {"field": "symbol", "type": "nominal"}
  }
}

【问题讨论】：

标签： vega-lite

【解决方案1】：

您可以使用scale.domain 和scale.range 参数设置自定义Color Scheme：

"color": {
  "field": "symbol",
  "type": "nominal",
  "scale": {"domain": ["gold", "silver"], "range": ["#F1C40F", "#95A5A6"]}
}

无论如何指定数据源，这都有效。

这是应用于图表时的结果 (Vega Editor)：

【讨论】：