vega-lite - Vega-Lite:是否可以将图像作为折线图中的标签?
解决方案
在另一个答案中使用相同的技术,可以通过额外的层添加图像轴:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"x": 0.5, "y": 0.5, "img": "data/ffox.png"},
{"x": 1.5, "y": 1.5, "img": "data/gimp.png"},
{"x": 2.5, "y": 2.5, "img": "data/7zip.png"}
]
},
"layer": [{
"mark": {"type": "image", "width": 50, "height": 50},
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {"field": "y", "type": "quantitative"},
"url": {"field": "img", "type": "nominal"}
}
}, {
"transform": [{"calculate": "-.2", "as": "axis"}],
"mark": {"type": "image", "width": 25, "height": 25},
"encoding": {
"x": {"field": "x", "type": "quantitative", "axis":{"labelExpr": "", "title": null}},
"y": {"field": "axis", "type": "quantitative", "scale": {"domain": [0, 2.5]}},
"url": {"field": "img", "type": "nominal"}
}
}],
"resolve": {"scale": {"y": "shared"}}
}
===== 2021-07-20 =====
您的 BarChartx
编码使用的x
字段分布不均匀,因此未对齐。
如果您的编辑器中确实a
显示了该字段,最简单的方法是将编码替换为"x": {"field": "a", "type": "ordinal", "axis": null}
即使该a
字段不存在,您可能想要添加这样一个字段来对齐甚至排序图像轴。
我能想到的最后一个手段是window
变换,这是一种过度杀伤,但也没有增加额外的价值:
推荐阅读
- docker - 如何使用一些自定义变量使 Gitlab CI/CD 运行容器?
- c++ - 带有 vecS 的 adjacency_list 上的`boost::edge()` 的运行时复杂度是多少?
- c# - 是否有一种标准方法可以在类之间引用相同的对象?
- checkbox - 如何在for循环角度8中的每个项目内绑定ngmodel?
- java - 本机 java 对本机应用程序隐蔽 playstore 做出反应
- html - 如何在列中显示表格
- amazon-web-services - 如何在fargate中连接两个任务
- c++ - 可以重载赋值运算符以返回类属性的值吗?
- grid - 在 .cs Xamarin 表单中的 Grid 行单元格内设置条目
- python - 按日期视图过滤的 Django 对象总和