如何使用Vega将这个堆积条形图制作成水平堆积条形图？

Question

有人可以帮我在Vega做一个水平堆积条形图，请注明以下规格吗？

我没有到达反转杆的轴:(

要使轴反转它很容易，但我只是到达垂直倒置的堆叠条，但没有水平

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

非常感谢你的帮助:)）

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}}
      }
    }
  ]
}