了解 Vega 中的垂直条形图答案

【问题标题】：Understanding Vertical Bar charts in Vega了解 Vega 中的垂直条形图
【发布时间】：2016-05-28 00:05:19
【问题描述】：

我一直在玩 Vega，但我不知道如何将垂直条形图变成水平条形图。

不久前在这里发布了一个类似的问题：vega horizontal bar charts，但提供的答案对于代码究竟做了什么以产生所需的结果并不是很清楚。我也无法让解决方案运行！

我现在的理解是你需要切换 X 和 Y 轴和刻度，但我迷失的地方是让标记也被翻转？我试过设置“x”和“y”属性，但我只是得到一个空白图表作为回报......真的感觉我只缺少一件事，因为我的轴是正确的，但无法弄清楚它是什么是！

编辑：取得了一些进展！我的列现在出现了，但它们的位置与实际的刻度发生了奇怪的变化。我已经研究过调整序数比例的“点”参数，但结果是最后一列

And with the "points" parameter set to true for the y scale.

这是我到目前为止的代码

{
  "width": 400,
  "height": 400,
  "padding": {
    "top": 30,
    "left": 40,
    "bottom": 30,
    "right": 10
  },
  "data": [
    {
      "name": "table",
      "values": [
        {
          "x": "Mon",
          "y": 2
        },
        {
          "x": "Tue",
          "y": 3
        },
        {
          "x": "Wed",
          "y": 10
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "ordinal",
      "points": true
      "range": "height",
      "zero": false,
      "domain": {
        "data": "table",
        "field": "x"
      }
    },
    {
      "name": "y",
      "type": "linear",
      "range": "width",
      "domain": {
        "data": "table",
        "field": "y"
      },
      "nice": true
    }
  ],
  "axes": [
    {
      "type": "x",
      "scale": "y"
    },
    {
      "type": "y",
      "scale": "x"
    }
  ],
  "marks": [
    {
      "type": "rect",
      "from": {
        "data": "table"
      },
      "properties": {
        "enter": {
          "x": {
            "scale": "y",
            "field": "y"
          },
          "x2": {
            "value": 0
          },
          "yc": {
            "scale": "x",
            "field": "x"
          },
          "height": {
            "value": 40
          },
          "fill": {
            "r": {
              "value": 66
            },
            "g": {
              "value": 190
            },
            "b": {
              "value": 244
            }
          }
        }
      }
    }
  ]
}

【问题讨论】：

标签： javascript charts

【解决方案1】：

胜利！

这是一个工作规范！

我使用序数比例的“填充”属性来获得所需的结果。

{
  "width": 400,
  "height": 400,
  "padding": {
    "top": 30,
    "left": 40,
    "bottom": 30,
    "right": 10
  },
  "data": [
    {
      "name": "table",
      "values": [
        {
          "x": "Mon",
          "y": 2
        },
        {
          "x": "Tue",
          "y": 3
        },
        {
          "x": "Wed",
          "y": 10
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "ordinal",
      "range": "height",
      "points": true,
      "padding": 1,
      "zero": false,
      "domain": {
        "data": "table",
        "field": "x"
      }
    },
    {
      "name": "y",
      "type": "linear",
      "range": "width",
      "domain": {
        "data": "table",
        "field": "y"
      },
      "nice": true
    }
  ],
  "axes": [
    {
      "type": "x",
      "scale": "y"
    },
    {
      "type": "y",
      "scale": "x"
    }
  ],
  "marks": [
    {
      "type": "rect",
      "from": {
        "data": "table"
      },
      "properties": {
        "enter": {
          "x": {
            "scale": "y",
            "field": "y"
          },
          "x2": {
            "value": 0
          },
          "yc": {
            "scale": "x",
            "field": "x"
          },
          "height": {
            "value": 40
          },
          "fill": [
            66,
            190,
            244
          ]
        }
      }
    }
  ]
}

【讨论】：