0

有人可以帮我在 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}}
      }
    }
  ]
}

非常感谢您的帮助 ：）

4

1 回答 1

0

反转事物vega并不像使用 那样容易，在这种情况下切换和vega-lite就足够了。xy

这通常应该这样做：

{
  "$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}}
      }
    }
  ]
}
于 2017-06-01T22:03:48.977 回答