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

Question

I want to have images as my axis labels. I tried to use the image mark, but that did not work and that is kind of expected. Label expression is also something I tried, but that did not work if I want it to be an image. What else could I tried or is it possible at all?

Line chart example

Answer 1

Using the same technique in another answer , an image axis can be added via an extra layer:

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

Your BarChart's x encoding uses the x field which is not evenly distributed, so it is misaligned.

If you do have the a field shown in your editor, simplest way is to replace the encoding as "x": {"field": "a", "type": "ordinal", "axis": null}

Vega Editor

Even the a field was not there, you may wanna add such a field for aligning, or even ordering, the image axis.

The last resort I can think of is window transform which is an overkill, but adds no extra value as well:

Vega Editor