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

Posted

技术标签:

【中文标题】如何在 Vega-Lite 中用特定颜色为线条着色?【英文标题】:How to color lines with specific colors in 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"
  

【问题讨论】:

【参考方案1】:

您可以使用scale.domainscale.range 参数设置自定义Color Scheme:

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

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

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

【讨论】:

以上是关于如何在 Vega-Lite 中用特定颜色为线条着色?的主要内容,如果未能解决你的问题,请参考以下文章

Vega-lite 从数据中设置颜色,同时保留图例

材料设计:在Android中用两种颜色为两个按钮着色

如何更改 UIDatePicker 的线条颜色

如何在 Windows 控制台中为特定像素着色

Opengl 3+用不同颜色绘制线条

如何根据条件为ggplot中的线条着色?