vega-lite - 如何在 Vega-Lite 中用特定颜色为线条着色?
问题描述
VegaLite 自动分配颜色。黄金价格是蓝色的,白银价格是橙色的,感觉不对。
如何分配明确的颜色-#F1C40F
金色和#95A5A6
银色?
我还想保留data.values
下面示例代码中的 - 作为一组单独的数组。
代码和游乐场
{
"$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"}
}
}
解决方案
您可以使用和参数设置自定义颜色方案:scale.domain
scale.range
"color": {
"field": "symbol",
"type": "nominal",
"scale": {"domain": ["gold", "silver"], "range": ["#F1C40F", "#95A5A6"]}
}
无论如何指定数据源,这都有效。
这是应用于图表时的结果(Vega Editor):
推荐阅读
- python - 如何将字符串转换为变量?
- java - Log4j2:TimeBasedTriggeringPolicy 策略最大值不起作用
- angular - Angular 选择性导入/注入
- regex - 剪贴板的每一行(如果可用)如何在同一窗口中作为 url 打开,但在使用 AutoHotkey (Chrome) 的各个选项卡中延迟?
- matlab - 如何在 Matlab 的 for 循环中自动计算导数?
- swift - 如何正确处理 macOS 上 NavigationView 中的选择?
- tensorflow - 什么是 Colab 上传(重复/持续),为什么?
- android - Kotlin Room Cooroutines 从查询返回值
- video - 在 android 或 windows10 中的 10 分钟视频上嵌入水印的最快方法?
- aws-lambda - 如何扩展 DynamoDB 记录处理?