Vega-Lite：是否可以将图像作为折线图中的标签？答案

【问题标题】：Vega-Lite: Is it possible to have images as labels in a line chart?Vega-Lite：是否可以将图像作为折线图中的标签？
【发布时间】：2021-07-14 06:08:27
【问题描述】：

我想将图像作为我的轴标签。我尝试使用图像标记，但这不起作用，这是意料之中的。标签表达也是我尝试过的，但如果我想让它成为图像，那它就不起作用了。我还能尝试什么，或者有什么可能？

Line chart example

【问题讨论】：

标签： vega-lite vega

【解决方案1】：

使用another answer 中的相同技术，可以通过额外的层添加图像轴：

{
  "$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"}}
}

Vega Editor

===== 2021-07-20 =====

您的 BarChart 的 x 编码使用的 x 字段分布不均，因此未对齐。

如果您的编辑器中确实显示了a 字段，最简单的方法是将编码替换为"x": {"field": "a", "type": "ordinal", "axis": null}

Vega Editor

即使a 字段不存在，您可能想要添加这样一个字段来对齐甚至排序图像轴。

我能想到的最后一招是window 转换，这有点过头了，但也没有增加额外的价值：

Vega Editor

【讨论】：

我无法让它与折线图一起使用。你能看看我编辑的问题吗？
我已经添加了如何指定 xAxis