如何使用 Vega 将此堆叠条形图转换为水平堆叠条形图？

Question

有人可以帮我用以下规范在 Vega 中做一个水平堆积条形图吗？

我不是来反转条形图的坐标轴的:(

要反转轴很容易，但我只是为了垂直反转堆叠的条形图，而不是水平方向

{
  "$schema": "https://vega.github.io/schema/vega/v3.0.json",
  "width": 500,
  "height": 200,
  "padding": 5,
  "data": [
    {
      "name": "table",
      "values": [
        {"x": 0,"y": 28,"c": "yes"},
        {"x": 0,"y": 12,"c": "white"},
        {"x": 0,"y": 60,"c": "no"},
        {"x": 1,"y": 28,"c": "yes"},
        {"x": 1,"y": 12,"c": "white"},
        {"x": 1,"y": 60,"c": "no"},
        {"x": 2,"y": 28,"c": "yes"},
        {"x": 2,"y": 12,"c": "white"},
        {"x": 2,"y": 60,"c": "no"},
        {"x": 3,"y": 28,"c": "yes"},
        {"x": 3,"y": 12,"c": "white"},
        {"x": 3,"y": 60,"c": "no"},
        {"x": 4,"y": 28,"c": "yes"},
        {"x": 4,"y": 12,"c": "white"},
        {"x": 4,"y": 60,"c": "no"},
        {"x": 5,"y": 28,"c": "yes"},
        {"x": 5,"y": 12,"c": "white"},
        {"x": 5,"y": 60,"c": "no"},
        {"x": 6,"y": 28,"c": "yes"},
        {"x": 6,"y": 12,"c": "white"},
        {"x": 6,"y": 60,"c": "no"},
        {"x": 7,"y": 28,"c": "yes"},
        {"x": 7,"y": 12,"c": "white"},
        {"x": 7,"y": 60,"c": "no"},
        {"x": 8,"y": 28,"c": "yes"},
        {"x": 8,"y": 12,"c": "white"},
        {"x": 8,"y": 60,"c": "no"},
        {"x": 9,"y": 28,"c": "yes"},
        {"x": 9,"y": 12,"c": "white"},
        {"x": 9,"y": 60,"c": "no"}
      ],
      "transform": [
        {
          "type": "stack",
          "groupby": ["x"],
          "sort": {"field": "c"},
          "field": "y"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "band",
      "range": "width",
      "domain": {"data": "table","field": "x"}
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "nice": true,
      "zero": true,
      "domain": {"data": "table","field": "y1"}
    },
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "table","field": "c","sort": true},
      "range": ["#FF0000","#FFFFFF","#008000"]
    },
    {
      "name": "colorStroke",
      "type": "ordinal",
      "domain": {"data": "table","field": "c"},
      "range": ["#000000"]
    }
  ],
  "axes": [
    {"orient": "bottom","scale": "x"},
    {"orient": "left","scale": "y"}
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "x": {"scale": "x","field": "x"},
          "width": {"scale": "x","band": 1,"offset": -5},
          "y": {"scale": "y","field": "y0"},
          "y2": {"scale": "y","field": "y1"},
          "stroke": {"scale": "colorStroke","field": "c"},
          "strokeWidth": {"value": 0.5},
          "fill": {"scale": "color","field": "c"}
        },
        "update": {"fillOpacity": {"value": 1}},
        "hover": {"fillOpacity": {"value": 0.5}}
      }
    }
  ]
}

非常感谢您的帮助:)

Answer 1

在 vega 中反转事物不像在 vega-lite 中那样容易，在 x 和 y 中切换就足够了。

通常应该这样做：

{
  "$schema": "https://vega.github.io/schema/vega/v3.0.json",
  "width": 200,
  "height": 500,
  "padding": 5,
  "data": [
    {
      "name": "table",
      "values": [
        {"x": 0,"y": 28,"c": "yes"},
        {"x": 0,"y": 12,"c": "white"},
        {"x": 0,"y": 60,"c": "no"},
        {"x": 1,"y": 28,"c": "yes"},
        {"x": 1,"y": 12,"c": "white"},
        {"x": 1,"y": 60,"c": "no"},
        {"x": 2,"y": 28,"c": "yes"},
        {"x": 2,"y": 12,"c": "white"},
        {"x": 2,"y": 60,"c": "no"},
        {"x": 3,"y": 28,"c": "yes"},
        {"x": 3,"y": 12,"c": "white"},
        {"x": 3,"y": 60,"c": "no"},
        {"x": 4,"y": 28,"c": "yes"},
        {"x": 4,"y": 12,"c": "white"},
        {"x": 4,"y": 60,"c": "no"},
        {"x": 5,"y": 28,"c": "yes"},
        {"x": 5,"y": 12,"c": "white"},
        {"x": 5,"y": 60,"c": "no"},
        {"x": 6,"y": 28,"c": "yes"},
        {"x": 6,"y": 12,"c": "white"},
        {"x": 6,"y": 60,"c": "no"},
        {"x": 7,"y": 28,"c": "yes"},
        {"x": 7,"y": 12,"c": "white"},
        {"x": 7,"y": 60,"c": "no"},
        {"x": 8,"y": 28,"c": "yes"},
        {"x": 8,"y": 12,"c": "white"},
        {"x": 8,"y": 60,"c": "no"},
        {"x": 9,"y": 28,"c": "yes"},
        {"x": 9,"y": 12,"c": "white"},
        {"x": 9,"y": 60,"c": "no"}
      ],
      "transform": [
        {
          "type": "stack",
          "groupby": ["x"],
          "sort": {"field": "c"},
          "field": "y"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "y",
      "type": "band",
      "range": "height",
      "domain": {"data": "table","field": "x"},
      "reverse": true
    },
    {
      "name": "x",
      "type": "linear",
      "range": "height",
      "nice": true,
      "zero": true,
      "reverse": true,
      "domain": {"data": "table","field": "y1"}
    },
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "table","field": "c","sort": true},
      "range": ["#FF0000","#FFFFFF","#008000"]
    },
    {
      "name": "colorStroke",
      "type": "ordinal",
      "domain": {"data": "table","field": "c"},
      "range": ["#000000"]
    }
  ],
  "axes": [
    {"orient": "bottom","scale": "x"},
    {"orient": "left","scale": "y"}
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "y": {"scale": "y","field": "x"},
          "height": {"scale": "y","band": 1,"offset": -5},
          "x": {"scale": "x","field": "y0"},
          "x2": {"scale": "x","field": "y1"},
          "stroke": {"scale": "colorStroke","field": "c"},
          "strokeWidth": {"value": 0.5},
          "fill": {"scale": "color","field": "c"}
        },
        "update": {"fillOpacity": {"value": 1}},
        "hover": {"fillOpacity": {"value": 0.5}}
      }
    }
  ]
}

如何使用 Vega 将此堆叠条形图转换为水平堆叠条形图？

How to do this stacked bar chart into a horizontal stacked bar chart with Vega?

javascript

vega