如何在 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.domain
和scale.range
参数设置自定义Color Scheme:
"color":
"field": "symbol",
"type": "nominal",
"scale": "domain": ["gold", "silver"], "range": ["#F1C40F", "#95A5A6"]
无论如何指定数据源,这都有效。
这是应用于图表时的结果 (Vega Editor):
【讨论】:
以上是关于如何在 Vega-Lite 中用特定颜色为线条着色?的主要内容,如果未能解决你的问题,请参考以下文章